I have an existing front js application without any unit tests. It's not actually particularly suitable for all sources to be unit tested (no dependency injection, not decoupled in units, DOM manipulation heavily mix with logic, etc.) but some files (ES2015 modules) can be right now testable.
I decided to go with Karma/Mocha/Chai and i already have a standalone karma test which works with the following configuration.
module.exports = function(config) {
config.set({
basePath: '',
frameworks: [
'mocha',
'chai',
],
singleRun: true,
files: [
'node_modules/babel-polyfill/dist/polyfill.js',
'src/**/*.js',
],
preprocessors: {
'src/**/*.js': ['babel'],
},
babelPreprocessor: {
options: {
presets: ['es2015'],
plugins: ['transform-es2015-modules-umd'],
sourceMap: 'inline',
},
},
browsers: [
'Chrome',
//'ChromeCanary',
//'PhantomJS',
//'Firefox',
//'Opera',
//'IE',
//'Safari',
],
reporters: [
'mocha',
],
});
};
my structure files is as follow :
node_modules
src/
module.js
module.test.js
karma.conf.js
package.json
the package.json have this dependencies :
"devDependencies": {
"babel-core": "^6.26.0",
"babel-plugin-transform-es2015-modules-umd": "^6.24.1",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"chai": "^4.1.2",
"karma": "^1.7.1",
"karma-babel-preprocessor": "^7.0.0",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^2.2.0",
"karma-firefox-launcher": "^1.0.1",
"karma-growl-reporter": "^1.0.0",
"karma-ie-launcher": "^1.0.0",
"karma-mocha": "^1.3.0",
"karma-mocha-reporter": "^2.2.4",
"karma-opera-launcher": "^1.0.0",
"karma-phantomjs-launcher": "^1.0.4",
"karma-safari-launcher": "^1.0.0",
"mocha": "^4.0.0"
}
And just for easy usage :
"scripts": {
"test": "karma start"
},
Now i'm trying to integrate that configuration with the existing project, but it's failing because it runs all sources on the browser, so trying to bootstrap the app without the dependencies (external scripts). But even if I include all those in the 'file' config property of karma, there will be always problems with DOM manipulation on not existing HMTL, relying on global variables not here, etc.
So I'm wondering how to preprocess (logically and with what tools) to have only my *.test.js to be launched without my app bootstrapping. And so to load only the files needed for the tests.
I was thinking of making a bundle for each *.test.js file with the corresponding file tested (resolved with the import), and this way, as far as i don't make test files for all files not ready to be tested in my app, they should not be loaded.
Is this the best way to go, how can the tests can be done in an other way ?
Related
I am learning MERN application development. I got a incomplete MERN application and trying to run the application. My package.json file is like below.
package.json
{
"name": "machine-shop",
"version": "1.0.0",
"private": true,
"type": "module",
"scripts": {
"build": "node ace build --production",
"start": "node server.js",
"dev": "node ace serve --watch",
"lint": "eslint . --ext=.ts",
"format": "prettier --write ."
},
"devDependencies": {
"#adonisjs/assembler": "^5.0.0",
"#babel/core": "^7.14.3",
"#babel/preset-react": "^7.13.13",
"#symfony/webpack-encore": "^1.4.0",
"#types/node": "^16.3.3",
"adonis-preset-ts": "^2.1.0",
"autoprefixer": "^10.2.6",
"eslint": "^7.27.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-adonis": "^1.3.1",
"eslint-plugin-prettier": "^3.4.0",
"node-pre-gyp": "^0.17.0",
"pino-pretty": "^5.0.1",
"postcss": "^8.3.0",
"postcss-loader": "^5.3.0",
"prettier": "^2.3.0",
"sass": "^1.34.0",
"sass-loader": "^11.1.1",
"tailwindcss": "^2.1.2",
"typescript": "~4.2",
"youch": "^2.2.2",
"youch-terminal": "^1.1.1"
},
"dependencies": {
"-": "^0.0.1",
"#adonisjs/auth": "^8.0.4",
"#adonisjs/core": "^5.1.0",
"#adonisjs/lucid": "^14.1.0",
"#adonisjs/repl": "^3.0.0",
"#adonisjs/session": "^6.0.0",
"#adonisjs/shield": "^7.0.0",
"#adonisjs/view": "^6.0.0",
"#ckeditor/ckeditor5-build-decoupled-document": "^28.0.0",
"#ckeditor/ckeditor5-react": "^3.0.2",
"#date-io/date-fns": "2.6.1",
"#formatjs/intl-pluralrules": "1.3.5",
"#fortawesome/fontawesome-free": "5.13.0",
"#manaflair/redux-batch": "1.0.0",
"#material-ui/core": "4.9.14",
"#material-ui/icons": "4.9.1",
"#material-ui/lab": "4.0.0-alpha.53",
"#material-ui/pickers": "3.2.10",
"#material-ui/styles": "4.9.14",
"#reduxjs/toolkit": "^1.6.1",
"#tanem/svg-injector": "8.0.50",
"apexcharts": "^3.27.2",
"axios": "^0.21.1",
"axios-mock-adapter": "1.18.1",
"bootstrap": "4.6.0",
"camelcase": "^5.2.0",
"clipboard-copy": "3.1.0",
"clsx": "1.1.0",
"cp-cli": "2.0.0",
"css-mediaquery": "^0.1.2",
"date-fns": "2.8.1",
"dotenv": "^10.0.0",
"dotenv-expand": "5.1.0",
"downshift": "3.4.2",
"fg-loadcss": "^3.1.0",
"force": "^0.0.3",
"formik": "2.1.4",
"holderjs": "^2.9.9",
"json2mq": "^0.2.0",
"luxon": "^1.27.0",
"material-ui-popup-state": "^1.8.3",
"mysql": "^2.18.1",
"object-path": "^0.11.5",
"phc-argon2": "^1.1.1",
"phc-bcrypt": "^1.0.7",
"prop-types": "^15.7.2",
"proxy-addr": "^2.0.7",
"react": "^17.0.2",
"react-app-polyfill": "^1.0.4",
"react-bootstrap": "1.0.1",
"react-bootstrap-table-next": "4.0.2",
"react-bootstrap-table2-paginator": "2.1.2",
"react-datepicker": "2.16.0",
"react-dev-utils": "^9.1.0",
"react-dom": "^17.0.2",
"react-draggable": "4.4.2",
"react-dropzone": "^11.3.4",
"react-inlinesvg": "1.2.0",
"react-intl": "3.6.2",
"react-is": "16.13.1",
"react-perfect-scrollbar": "1.5.8",
"react-portal": "4.2.0",
"react-redux": "7.1.3",
"react-router-dom": "^5.2.0",
"react-select": "3.1.0",
"react-slick": "^0.28.1",
"react-swipeable-views": "0.13.9",
"react-syntax-highlighter": "12.2.1",
"react-tinder-card": "^1.4.0",
"react-window": "1.8.5",
"redux": "4.0.5",
"redux-persist": "6.0.0",
"redux-saga": "1.1.3",
"reflect-metadata": "^0.1.13",
"socicon": "3.0.5",
"source-map-support": "^0.5.19",
"sweetalert2": "^11.0.11",
"yup": "^0.32.9"
}
}
My server.js file is like below
server.js
import 'reflect-metadata';
import sourceMapSupport from 'source-map-support';
import { Ignitor } from '#adonisjs/core/build/standalone';
sourceMapSupport.install({ handleUncaughtExceptions: false })
new Ignitor(__dirname).httpServer().start()
I am trying to run the application using npm start command. But I am getting below error.
file:///home/foysal/Music/machineshop/server.js:20
new Ignitor(__dirname).httpServer().start()
^
ReferenceError: __dirname is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/home/foysal/Music/machineshop/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
at file:///home/foysal/Music/machineshop/server.js:20:13
What is the meaning of this code new Ignitor(__dirname).httpServer().start() ? Is it correct code ?
Previously I worked in another MERN application. server.js file of that project is not similar like server.js file of this project.
Am I doing anything wrong ?
Could any one help me to run the application ?
You have mixed up client and server. Usually you keep them separated when you work on stacks like that - in separate repositories or at least in separate directories. You have 2 ways as I see:
Separate client and server dependencies
Use Adonis to serve the React app
I would take the first path for better maintainability. If that seems too complicated, you can take the later one for now and keep working on separation down the road. For that you may wanna look into this document.
I'm trying to set up a React app with Gatsby, and for some reason the ESLint doesn't seem to be fully working properly.
I put the code const test = 4; and left the variable unused, which I would expect to throw an unused-variable error in ESLint, but it does not.
I use VSCode.
This is my eslintrc.json
{
"extends": ["airbnb", "prettier", "prettier/react"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}
These are the dependencies in my package.json
"dependencies": {
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"gatsby": "^2.24.67",
"gatsby-cli": "^2.12.102",
"gatsby-plugin-material-ui": "^2.1.10",
"react": "^16.12.0",
"react-dom": "^16.12.0"
},
"devDependencies": {
"eslint": "^7.10.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.12.0",
"eslint-plugin-prettier": "^3.1.4",
"prettier": "2.0.5"
},
You need to add the rule in your eslintrc.json file:
"rules":{
"no-unused-vars": "warn",
}
Of course, you can change the warning for your desired behavior. You can check for further details in ESLint docs.
I found tutorials like this: https://medium.com/heresy-dev/getting-started-with-postcss-a-quick-guide-for-sass-users-90c8b675d5f4
(I must really wonder how less i find on the internet about the use of a postcss.json config file.)
and this one: https://www.sitepoint.com/an-introduction-to-postcss/
But all those tutorials didnt worked for me. I use the latest version of postcss and postcss-cli. When i start this script:
"postcss": "postcss --config postcss.json"
then i just get a error:
Input Error: Did not receive any STDIN
When i google for this, i also dont find any solution that helps me.
My package.json:
{
"scripts": {
"postcss": "postcss --config postcss.json"
},
"devDependencies": {
"autoprefixer": "^7.1.6",
"bootstrap-sass": "^3.3.7",
"cssnano": "^3.10.0",
"node-sass": "^4.5.0",
"postcss": "^6.0.13",
"postcss-cli": "^4.1.1",
"postcss-colormin": "^2.2.2",
}
}
My postcss.json:
{
"use": [
"autoprefixer"
],
"input": "public_html/css/",
"output": "public_html/css/min/*.css",
"local-plugins": true,
"watch": false
}
Inherited a broken NLog project from a long-gone co-worker...
VS2015 update 2
Latest Node install
Latest npm update 3.10.3
'.net 5.0' project (pre-core 1.0)
My npm node always says 'npm - not installed'
When I right click, I instantly get 'illegal characters in path'
here's my package.json
{
"version": "0.0.0",
"name": "asp.net",
"devDependencies": {
"gulp": "^3.9.0",
"gulp-bower": "^0.0.11",
"gulp-concat": "^2.6.0",
"gulp-install": "^0.6.0",
"gulp-sass": "^2.1.1",
"gulp-uglify": "^1.5.1",
"gulp-util": "^3.0.7",
"gulp-watch": "^4.3.5",
"run-sequence": "^1.1.5",
"browser-sync": "^2.10.0",
"gulp-filter": "^3.0.1",
"main-bower-files": "^2.9.0",
"gulp-rename": "^1.2.2",
"gulp-sourcemaps": "^1.6.0"
}
here's my project.json:
{
"webroot": "wwwroot",
"version": "1.0.0-*",
"dependencies": {
"EntityFramework.Commands": "7.0.0-rc1-final",
"EntityFramework.MicrosoftSqlServer": "7.0.0-rc1-final",
"Microsoft.AspNet.Authentication.Cookies": "1.0.0-rc1-final",
"Microsoft.AspNet.Diagnostics": "1.0.0-rc1-final",
"Microsoft.AspNet.Diagnostics.Entity": "7.0.0-rc1-final",
"Microsoft.AspNet.Identity.EntityFramework": "3.0.0-rc1-final",
"Microsoft.AspNet.IISPlatformHandler": "1.0.0-rc1-final",
"Microsoft.AspNet.Mvc": "6.0.0-rc1-final",
"Microsoft.AspNet.Mvc.TagHelpers": "6.0.0-rc1-final",
"Microsoft.AspNet.Server.Kestrel": "1.0.0-rc1-final",
"Microsoft.AspNet.Server.WebListener": "1.0.0-rc1-final",
"Microsoft.AspNet.Session": "1.0.0-rc1-final",
"Microsoft.AspNet.SignalR.Server": "3.0.0-rc1-final",
"Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final",
"Microsoft.AspNet.Tooling.Razor": "1.0.0-rc1-final",
"Microsoft.Extensions.Caching.Memory": "1.0.0-rc1-final",
"Microsoft.Extensions.Configuration.Json": "1.0.0-rc1-final",
"Microsoft.Extensions.Logging": "1.0.0-rc1-final",
"Microsoft.Extensions.Logging.Console": "1.0.0-rc1-final",
"Microsoft.Extensions.Logging.Debug": "1.0.0-rc1-final",
"Microsoft.Extensions.Logging.NLog": "1.0.0-rc1-final",
"Microsoft.VisualStudio.Web.BrowserLink.Loader": "14.0.0-rc1-final",
"MvcWebApiCors": "0.3.0"
},
"commands": {
"web": "Microsoft.AspNet.Server.Kestrel",
"ef": "EntityFramework.Commands"
},
"frameworks": {
"dnx451": {
"dependencies": {
"Rally.RestApi": "1.0.0-*"
}
}
},
"exclude": [
"wwwroot",
"node_modules",
"bower_components"
],
"publishExclude": [
"node_modules",
"bower_components",
"**.kproj",
"**.user",
"**.vspscc"
],
"scripts": {
"postrestore": [ "npm install" ],
"prepare": [ "gulp" ]
}
Here's my Bower.json
{
"name": "WebApplication",
"private": true,
"dependencies": {
"bootstrap": "^4.0.0-alpha.2",
"signalr": "^2.2.0",
"font-awesome": "^4.5.0",
"moment": "^2.11.0",
"Chart-js": "^1.0.2",
"tether": "^1.1.1",
"bootstrap-daterangepicker": "2.1.17",
"handlebars": "^4.0.5",
"chosen": "^1.4.2"
}
global.json
{
"projects": [
"src",
"wrap"
],
"sdk": {
"version": "1.0.0-rc1-update1"
}
The overall problem is that none of the css/styles are showing. The site looks skeletal compared to what's on our iis box.
Faced the same issue when tried to install an npm package globally (with -g flag).
Any npm package which I tried to install globally was throwing the same error given below.
npm ERR! code EINVAL
npm ERR! path C:\Users\xxxxxxx'C:\Users\xxxxxxx\AppData\Roaming\npm
npm ERR! Illegal characters in path.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\xxxxxxx\AppData\Local\npm-cache\_logs\2021-12-15T10_49_39_874Z-debug.log
I checked the PATH variable. All is well.
After some research over the internet, tried the following command
npm bin -g
This showed a weird path.
C:\Users\xxxxxx'C:\Users\xxxxxx\AppData\Roaming\npm
(not in PATH env variable)
After reading this post, I tried to set the path prefix of npm config and it worked!
This is how I set it.
npm config set prefix C:\Users\xxxxxxx\AppData\Roaming\npm
You can check & confirm the same using,
npm config get prefix
Ideally, this path was getting added to the '.npmrc' file in my home directory (C:\Users\xxxxxxx). If you don't have any other content in the '.npmrc' file (like an access token to your private npm registry), deleting the file will fix this issue.
Just posting here, so that someone facing similar issue might find
this helpful as the question title relates to this issue.
Found the answer...
Some packages (for instance webpack) have dependency on packages that are not supported on windows which causes NPM to print warning about it. VS interprets it as generic problem and says that packages are not installed even though in reality this warning should be ignored.
I'm having an issue with vue-loader where it will not recognize es2015 format.
Here are the steps I'm taking:
//initialize the project via vue-cli
vue init webpack-simple && npm i
// start the webpack-dev-server, this npm script is an alias for the command:
// webpack-dev-server --inline --hot
npm run dev
At this point the files are being hosted by webpack-dev-server at localhost:8080 successfully.
When I modify App.vue and add anything es2015 in I get an error from webpack-dev-server:
<template>
<div id="app">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello Vue!'
}
},
// added this function call for the ready lifecycle hook
ready () => alert('worked')
}
</script>
<style>
body {
font-family: Helvetica, sans-serif;
}
</style>
This made me think that the es2015 preset for babel wasn't installed, but it is definitely in the dev dependencies list along with the transform-runtime:
// truncated package.json
{
...
"scripts": {
"dev": "webpack-dev-server --inline --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^1.0.0",
"babel-runtime": "^5.8.0"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-plugin-transform-runtime": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-stage-2": "^6.0.0",
"cross-env": "^1.0.6",
"css-loader": "^0.23.0",
"file-loader": "^0.8.4",
"json-loader": "^0.5.4",
"url-loader": "^0.5.7",
"vue-hot-reload-api": "^1.2.0",
"vue-html-loader": "^1.0.0",
"vue-loader": "^8.2.1",
"vue-style-loader": "^1.0.0",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.12.0"
}
}
Plus the docs for vue-loader say that es2015 is enabled by default:
There are many cool features provided by vue-loader:
ES2015 enabled by default;
Is there a step or a configuration I'm missing?
Versions:
vue-cli: 2.0.3
npm: 3.8.6
node: 6.0.0
I think it should be
ready: () => alert('worked')
or
ready(){alert('worked')}