I am using JEST to unit test my app. The test execution is running fine. However I am not able to collect code coverage correctly. The coverage is only logged for folder where I have the jest config file. Snapshot of folder structure:
In the console the coverage is only generated for enzyme-config.js. I tried using "collectCoverageFrom" : ["**/src/**/*.js"] but it throws me Unknown for all params. Am I missing something here?
jest-setup.json:
{
"testEnvironment": "jsdom",
"setupTestFrameworkScriptFile": "./enzyme.setup.js",
"testResultsProcessor": "jest-teamcity-reporter",
"coverageReporters": [
"teamcity", "lcov", "text"
],
"collectCoverageFrom" : ["**/src/**/*.js"],
"roots": [
"../../../__tests__/unit"
]
}
Coverage log:
A double star notation (**) like you are using in your collectCoverageFrom array, will only match file and folders which are in or in subfolders of the current folder. Assuming jest will match these files based on the folder in which the setup is defined, it will not find any files outside of the subtree which it is in. You might want to try ../src/**/*.js.
Related
I am trying to do unit testing of my React app using Enzyme with Jest but getting this error
` FAIL src/components/XYZ/tests/ABC.test.js
● Test suite failed to run
SyntaxError: Name argument is not a valid custom element name.
Test Suites: 2 failed, 2 total
Tests: 0 total
Snapshots: 0 total
Time: 3.224 s
Ran all test suites.`
My Jest Config file is as following
"jest": {
"moduleNameMapper": {
"d3": "<rootDir>/node_modules/d3/dist/d3.min.js",
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"^.+\\.(css|less|scss)$": "identity-obj-proxy"
},
"setupFiles": [
"./src/"
],
"setupFilesAfterEnv": [
"./src/setUpTests.js"
],
"testPathIgnorePatterns": [
"./node_modules/"
]
},
Please let me know what I am doing wrong here ? TIA
I think the configuration used for setupFiles is wrong here. As per jest documentation
https://jestjs.io/docs/configuration#setupfiles-array
setUpFiles is used for "A list of paths to modules that run some code to configure or set up the testing environment. Each setupFile will be run once per test file. Since every test runs in its own environment, these scripts will be executed in the testing environment before executing setupFilesAfterEnv and before the test code itself. "
Please either remove setUpFiles or use proper file path here .
My React project works great. Some files need the raw-loader and I don't want to eject the project. So I have some raw-loader imports like this:
import blank_md from '!!raw-loader!./assets/blank.md.txt';
But jest dies with an error
Cannot find module '!!raw-loader!./assets/blank.md.txt' from ...
This is similar to Jest issue 4868
After adding jest-raw-loader I tried adding to Jest's config:
"transform": { "^!!raw-loader!.*": "jest-raw-loader" }
but no dice.
Using mocking would be fine too.
moduleNameMapper: {
"^!!raw-loader!.*": "jest-raw-loader",
}
This should load all the raw-loader import as required by jest.
Was looking for a solution myself and found that you should add the following module name mapping:
"moduleNameMapper": {
"^!!raw-loader!./assets/(.*)$": "<rootDir>/src/[insert path]/assets/$1"
}
Replacing with your correct path for the assets directory.
Edit: A nicer approach is just doing this tho
"moduleNameMapper": {
"^!!raw-loader!(.*)$": "$1"
}
I was able to use the Jest moduleNameMapper option to have Jest "use" the mock files.
The good news is that the Jest tests now run.
The bad news is that Jest still doesn't know how to load the files, so it supplies the filename to the app (instead of the file's contents). That's ok for my tests but is not optimal.
Here are some of the working settings that I'm using. I'm setting them in the package.json file:
"jest": {
"setupFiles": ["<rootDir>/src/tests/setup-register-context.js"],
"moduleNameMapper": {
"^!!raw-loader!.*sdkExamples.*txt": "<rootDir>/src/tests/__mocks__/templateMock.txt",
"^!!raw-loader!\\./toolbox.xml": "<rootDir>/src/tests/__mocks__/xmlMock.xml",
"^!!raw-loader!.*/assets/startBlocks.xml": "<rootDir>/src/tests/__mocks__/xmlMock.xml",
"!!raw-loader!.*md\\.txt": "<rootDir>/src/tests/__mocks__/mdMock.md"
}
}
I have a widget library that is created using React Native 0.55.3 and i am using the library in the web using React Native Web transpiler.
Currently my setup is React + TS + React Native Widgets (using RNW transpiler)
The library works fine in the web , but when i run the jest test case it starts complaining
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
I tried adding the following setup in the config file but with no avail .
"transformIgnorePatterns": [
"node_modules/(?!react-native-my-lib)"
],
Still it throws the same error , even tried adding transform and then pairing it to a mock file.
I am able to use the library in my project but the test case fails every-time
How can we fix this error ?
Right now what i have done in order to mitigate this issue is I have mocked the RN components as the RN components will be tested in their own Library and we will test the layout in React end mocking these components with string.
My solution [Please let me know if this is feasible]
create a mock file
module.exports = {
RN1COMP : '',
RN2COMP : ''
}
using module name mapper in jest
moduleNameMapper: {
"react-native-widgets": "<rootDir>/mocks/react-native-widgets.js"
},
Try this hope it works!!
"transformIgnorePatterns": [
"/node_modules/(?!(react-native|redux-persist|react-navigation.*?\\.js$))"]
Try this whole configuration in package.JSON
"jest" : {
"preset": "react-native",
"coveragePathIgnorePatterns": [
"allMocks.js"
],
"setupFiles": [
"<rootDir>/jest/allMocks.js"
],
"testPathIgnorePatterns": [
"/*/*.testdata.js$"
],
"transformIgnorePatterns": [
"/node_modules/(?!(react-native|redux-persist|react-navigation.*?\\.js$))"
],
"transform": {
"\\.(jpg|jpeg|PNG|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./fileTransformer.js"
},
"reporters": [
"default",
[
"./node_modules/jest-html-reporter",
{
"pageTitle": "Test Report",
"includeFailureMsg": true
}
]
]
}```
I'm currently trying to use testMatch to match test files:
"testMatch": [
"./src/__tests__/*.js",
"./src/**/?(*.)(spec|test).js"
]
And this is what my file structure looks like:
src/
-__test__/
-textInput.test.js
package.json
package-lock.json
README.MD
For some reason, it keeps telling me this:
Have I made a mistake in my regex? Thanks for the help in advance!
Jest documentation says default testMatch regEx is:
[
"**/__tests__/**/*.js?(x)",
"**/?(*.)+(spec|test).js?(x)"
]
Can you check these values?
i keep getting the error:
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Duplicate plugin/preset detected.
If you'd like to use two separate instances of a plugin,
they need separate names, e.g.
plugins: [
['some-plugin', {}],
['some-plugin', {}, 'some unique name'],
]
this is my babelrc with the changes it is asking for:
{
"presets": [
["#babel/env"],
["#babel/preset-react"]
],
"plugins": [
["#babel/plugin-syntax-jsx"],
["#babel/plugin-transform-react-jsx"],
["#babel/plugin-transform-react-display-name"],
["#babel/plugin-transform-react-jsx-self"],
["#babel/plugin-transform-react-display-name"]
]
}
Not really sure where i have the wrong syntax for the file. Also this is my first time configuring webpack4 with babel for a react application. Please let me know if everything looks fine for this to work with react.
Like the error says: you have a duplicate. ["#babel/plugin-transform-react-display-name"] is in your "plugins" array twice. Just delete one of them.
With that said: take a look at what's already included in preset-react (a preset is a pre-defined bundle of plugins). All of those plugins are already included (though "plugin-transform-react-jsx-self" is behind an option.)