I introduced code coverage in my project, but all the values (except one) are stuck at zero.
Here is my jest-config.json:
{
"collectCoverageFrom": [
"../shared/utils/*.js"
],
"coverageDirectory": "<rootDir>/coverage",
"coverageThreshold": {
"global": {
"branches": 0,
"functions": 0,
"lines": 0,
"statements": 0
}
},
"moduleFileExtensions": [
"js"
],
"moduleNameMapper": {
"\\.(css|scss)$": "identity-obj-proxy"
},
"moduleDirectories": [
"node_modules",
"job-board/node_modules"
],
"modulePaths": [
"<rootDir>/client"
],
"roots": [
"<rootDir>",
"<rootDir>/../shared"
],
"testRegex": "\\.test\\.js$"
}
My files being tested are in ../shared/src/utils/*.js and my tests are in ../shared/src/utils/__tests__/*.test.js.
And when I run node --harmony_proxies node_modules/jest-cli/bin/jest.js --config ./jest-config.json --coverage, I get this result:
Only, nearly all the functions in those files are fully tested...
Has anyone come across this problem?
Thanks in advance.
Run jest --coverage command to check coverage
Related
I am trying to optimize my webpack bundle size by splitting it into two bundles: webpack-bundle.js, which contains my code, and vendor-bundle.js, which contains node modules and third party libraries. But after I successfully created two bundles, I am getting two errors in the browser regarding both bundles:
Uncaught ReferenceError: exports is not defined at vendor-bundle.self-879f615019647c756dc959f99d735b3a2534b00805364ae6fca0091d1190d62d.js?body=1:1
Uncaught TypeError: Cannot read property 'call' of undefined at I (webpack-bundle.self-78221fc03008c178fe970b69731594f14d651dab84e5cf928beacc805ebde79c.js?body=1:1)
This is my webpack.config.js.
const config = {
"entry": {
"webpack-bundle": "./app/registration",
},
"output": {
filename: "[name].js",
path: pathLib.resolve(__dirname, "../app/assets/webpack"),
},
"module": {
"rules": [
{
"exclude": /node_modules/,
"test": /\.jsx?$/,
"use": {
"loader": "babel-loader",
"options": {
"plugins": [
"#babel/plugin-proposal-class-properties",
["#babel/plugin-proposal-decorators", {"legacy": true}],
"#babel/plugin-proposal-export-namespace-from",
"#babel/plugin-proposal-function-sent",
"#babel/plugin-proposal-json-strings",
"#babel/plugin-proposal-numeric-separator",
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-proposal-throw-expressions",
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-syntax-import-meta",
"#babel/plugin-transform-react-jsx"
],
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
}
}
],
},
"plugins": [
new webpack.ProvidePlugin({
"$": "jquery",
"jQuery": "jquery",
"window.jQuery": "jquery"
}),
new UglifyJsPlugin(),
],
"optimization": {
"splitChunks": {
"cacheGroups": {
"vendor": {
"test": /node_modules/,
"chunks": "all",
"name": "vendor-bundle"
}
}
}
},
"resolve": {
"alias": {
"Lib": pathLib.resolve(__dirname, "app/lib/"),
"Shared": pathLib.resolve(__dirname, "app/shared/")
},
"extensions": [".js", ".jsx"]
},
"target": "node"
};
module.exports = config;
This is my .babelrc:
{
"plugins": [
"#babel/plugin-proposal-class-properties",
["#babel/plugin-proposal-decorators", {"legacy": true}],
"#babel/plugin-proposal-export-namespace-from",
"#babel/plugin-proposal-function-sent",
"#babel/plugin-proposal-json-strings",
"#babel/plugin-proposal-numeric-separator",
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-proposal-throw-expressions",
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-syntax-import-meta",
"#babel/plugin-transform-react-jsx"
],
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
We use React, Rails, React on Rails, and Slim. To load webpack, I'd add this to my application.slim:
= javascript_include_tag 'vendor-bundle'
= javascript_include_tag 'webpack-bundle'
I want to be able to serve the two bundles I created. Is there anything wrong in the way I configured my webpack and split the bundle? Or should I install something else?
At the bottom of your webpack config, you have your target mode set to node
In node, module and module.exports both exist, but these don’t exist in the browser - this is what’s causing the error
If you remove this line, webpack will assume you’re targeting browsers instead, and will also transform this line for you - your bundles should then run in the browser as expected.
In my react project I have a root ./styles folder which contains various style objects for styled-components. I do not want these files to show up in the coverage test.
I've tried to hide them like so, but when I run npm run coverage they still show up.
package.json
"jest": {
"setupFilesAfterEnv": [
"<rootDir>/jest.setup.js"
],
"coveragePathIgnorePatterns": [
"<rootDir>/styles/",
"./styles/"
],
"testPathIgnorePatterns": [
"<rootDir>/.next/",
"<rootDir>/node_modules/",
"<rootDir>/styles/",
"./styles/"
],
"transform": {
"^.+\\.(js)$": "babel-jest",
"^.+\\.js?$": "babel-jest",
"^.+\\.ts?$": "babel-jest",
"^.+\\.tsx?$": "babel-jest",
"^.+\\.json5$": "json5-jest"
},
"moduleFileExtensions": [
"js",
"json",
"json5",
"ts",
"tsx"
],
"modulePaths": [
"<rootDir>/components/",
"<rootDir>/pages/",
"<rootDir>/shared/"
]
}
babelrc
{
"env": {
"development": {
"presets": [
"next/babel",
"#zeit/next-typescript/babel"
],
"plugins": [
["styled-components", {"ssr": true, "displayName": true}],
["#babel/plugin-proposal-decorators", {"legacy": true}],
["istanbul",{"exclude": ["styles/*.js"]}]
]
},
"production": {
"presets": [
"next/babel",
"#zeit/next-typescript/babel"
],
"plugins": [
["styled-components", {"ssr": true, "displayName": true}],
["#babel/plugin-proposal-decorators", {"legacy": true}]
]
},
"test": {
"presets": [
"#babel/preset-typescript",
["next/babel", {"preset-env": { "modules": "commonjs" }}]
],
"plugins": [
["styled-components", { "ssr": true, "displayName": true }],
["#babel/plugin-proposal-decorators", { "legacy": true }],
["babel-plugin-sass-vars"]
]
}
}
}
All I needed was this in package.json
"coveragePathIgnorePatterns": [
"<rootDir>/styles/"
],
And removed it from "testPathIgnorePatterns": <- having it both here and in coveragePathIgnorePatterns caused my tests to run forever and styles still showed up.
I also removed this from the .babelrc:
["istanbul",{"exclude": ["styles/*.js"]}]
Add this to your config (package.json):
modulePathIgnorePatterns: ["directoryNameToIgnore"]
or :
modulePathIgnorePatterns: ["/dist/"]
and :
coveragePathIgnorePatterns: ["/styles/"]
Doing some testing of some NodeJS functions using Jest, but it doesn't like import statements, e.g. import DatabaseController from '../util/database-controller'.
I've doing some reading and people suggested installing babel-jest and updating my config (below), but I've not had any luck. What am I missing? From what I understand, it doesn't understand import statements as it's an es6 thing...
Jest part of my package.json:
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
],
"resolver": "jest-pnp-resolver",
"setupFiles": [
"react-app-polyfill/jsdom"
],
"testMatch": [
"<rootDir>/**/__tests__/**/*.{js,jsx}",
"<rootDir>/**/?(*.)(spec|test).{js,jsx}"
],
"testEnvironment": "jsdom",
"testURL": "http://localhost",
"transform": {
"^.+\\.jsx?$": "babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"json",
"web.jsx",
"jsx",
"node"
]
},
Lately I find that I don't need babel-jest at all, and can get by simply with #babel/preset-env, and the following .babelrc:
{
"env": {
"test": {
"presets": [["#babel/preset-env"]]
}
}
}
This worked for my simple set-up:
devDependencies (in package.json):
"devDependencies": {
"babel-eslint": "^10.0.3",
"babel-preset-env": "^1.7.0",
"jest": "^24.9.0",
"parcel-bundler": "^1.12.3"
}
I simply created a babel.config.js as follows:
// babel.config.js
module.exports = {
presets: [
[
'#babel/preset-env',
{
targets: {
node: 'current',
},
},
],
],
};
Note - make sure to clear the cache before running!
Clear cache:
./node_modules/.bin/jest --clearCache
I've tried many things to disable webpack's minify because I need my function names to remain intact. All of this for CEF.
Here's my code: (I've also tried the commented UglifyJSPlugin config.)
const config = {
...
"optimization": {
"minimize": false
/*[
new UglifyJSPlugin({
"test": /\.(js|jsx)$/,
"uglifyOptions": {
"ecma": 6,
"warnings": true,
"mangle": false,
"keep_fnames": true,
"output": {
"beautify": false,
"comments": false
}
}
})
]*/
},
...
"test": /\.(js|jsx)$/,
"exclude": /node_modules/,
"use": {
"loader": "babel-loader",
"options": {
"presets": [
"#babel/env",
"#babel/react"
]
}
I know I don't need babel-loader, but I have no choice since script-loader doesn't have nodejs compatibility anymore.
Help much appreciated, thank you!
I have tried few of the available docker containers that has the google-chrome installed. Trying to run it in headless mode. few of the tried images are:
selenium/standalone-chrome
zenika/alpine-chrome
Installed nvm and all necessary packages
When running the commands to start test or build, it simply gets stuck
forever.
npm test
or
npm run build
This is the configuration in testee.json
{
"port": 3621,
"root": ".",
"reporter": "Spec",
"timeout": 120,
"delay": 1000,
"tunnel": {
"type": "local"
},
"launch": {
"type": "local"
},
"browsers": [{
"browser": "chrome",
"args": [
"--headless",
"--disable-gpu",
"--remote-debugging-port=9222"
]
}]
}
You need add '--no-sandbox' to browsers -> args object in your testee.json
{
"port": 3621,
"root": ".",
"reporter": "Spec",
"timeout": 120,
"delay": 1000,
"tunnel": {
"type": "local"
},
"launch": {
"type": "local"
},
"browsers": [{
"browser": "chrome",
"args": [
"--headless",
"--no-sandbox',
"--disable-gpu",
"--remote-debugging-port=9222"
]
}]
}
For more information Click here