Test coverage using jest-junit fails in a create-react-app project - jestjs

In a create-react-app/react-scripts#2.1.1 project, I'm trying to generate a coverage report using jest-junit. Unfortunately, it fails with the following:
$ yarn run test --coverage
Failed to write coverage reports:
ERROR: Error: Invalid report format [jest-junit]
STACK: Error: Invalid report format [jest-junit]
at Object.module.exports.create (D:\Users\username\Documents\Project\node_modules\istanbul-api\lib\input-error.js:6:15)
at Reporter.add (D:\Users\username\Documents\Project\node_modules\istanbul-api\lib\reporter.js:51:30)
at D:\Users\username\Documents\Project\node_modules\istanbul-api\lib\reporter.js:62:18
at Array.forEach (<anonymous>)
at Reporter.addAll (D:\Users\username\Documents\Project\node_modules\istanbul-api\lib\reporter.js:61:14)
at D:\Users\username\Documents\Project\node_modules\jest-cli\build\reporters\coverage_reporter.js:180:18
at Generator.next (<anonymous>)
at step (D:\Users\username\Documents\Project\node_modules\jest-cli\build\reporters\coverage_reporter.js:75:30)
at D:\Users\username\Documents\Project\node_modules\jest-cli\build\reporters\coverage_reporter.js:86:15
at process._tickCallback (internal/process/next_tick.js:68:7)
I encounter no errors if I run yarn run test. The following configuration block was added to the project's package.json file:
{
...
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts",
"!src/**/__stories__/",
"!<rootDir>/node_modules/"
],
"coverageReporters": [
"jest-junit"
]
}
...
}
Has anyone successfully configured jest-junit in a create-react-app#2 project?

Thanks to #jonrsharpe for the quick comment. I wasn't paying close enough attention... my mistake was dropping jest-junit into coverageReporters (as opposed to reporters).
Unfortunately, create-react-app#2 does not appear to support a custom reporters configuration in package.json. Interestingly, the following command works:
$ yarn run test --coverage --reporters=default --reporters=jest-junit
I'm used to most of create-react-app's configs overriding any explicitly defined options. However, it appears an exception (or loophole?) exists for yarn run test. With the above, I get the desired junit.xml file.

Related

Jest.config settings modulePathIgnorePatterns and testPathIgnorePatterns aren't having any effect

I'm running tests in a node app using jest. I can get tests running properly, but I can't seem to tell jest to ignore directories. For example, when I try to test a specific file convertExistingImages.ts with the command: npm test convertExistingImages I get a response in my terminal of:
> mfa-bot-2022#1.0.0 test
> jest
FAIL dist/utils/maintenance.ts/convertExistingImages.test.js
● Test suite failed to run
Your test suite must contain at least one test.
(...)
FAIL src/utils/maintenance/convertExistingImages.test.ts
● Test suite failed to run
(...)
As you can see, a duplicate file in my /dist folder is also being tested, which I don't want.
I've tried updating my jest.config.ts file as follows:
module.exports = {
"preset": "#shelf/jest-mongodb",
"modulePathIgnorePatterns": ["/build/"],
"testPathIgnorePatterns": ["/node_modules/", "/build/"]
}
But the modulePathIgnorePatterns and testPathIgnorePatterns settings aren't having any effect.
Can anyone tell me what I'm doing wrong?
You configured it to ignore the build folder but your conflict is in the dist folder. Change build to dist in your ignore settings.
You can read more about this config on the Jest site here.

GitLab Pipeline not able to parse double-dash in npm script property

I am using stencil for building custom web components.
For testing, stencil is using jest CLI for running test files, here is the npm script command Im currently used for running those tests locally:
{
"test:base": "stencil test --spec --e2e",
"test:all": "npm run test:base -- --coverage"
}
It is working perfectly when I am running it locally and the parameter --coverage in script test:all after double-dash can be parsed correctly:
$ npm run test:base -- --coverage --silent
> #heartlandone/vega#1.1.20 test:base
> stencil test --spec --e2e "--coverage" "--silent"
[59:13.9] #stencil/core
[59:14.1] v2.14.0 💫
[59:14.2] testing e2e and spec files
[59:16.3] build, vega, dev mode, started ...
[59:16.8] transpile started ...
[59:18.3] transpile finished in 1.45 s
[59:18.3] copy started ...
[59:18.3] generate lazy started ...
[59:18.5] copy finished (17 files) in 210 ms
[59:21.0] generate lazy finished in 2.76 s
[59:21.2] build finished in 4.91 s
[59:21.2] jest args: --coverage --silent --e2e --spec --max-workers=8
...
✨ Done in 36.94s.
However when I run it in gitlab pipeline:
> npm run test:base -- --coverage --silent
> #heartlandone/vega#1.1.20 test:base /builds/heartland1/vega/tiger/vega-stencil
> stencil test --spec --e2e "--coverage" "--silent"
[12:42.1] #stencil/core
[12:42.5] v2.14.0 💫
[12:42.9] testing e2e and spec files
[12:51.4] build, vega, dev mode, started ...
[12:51.6] transpile started ...
[12:55.6] transpile finished in 3.99 s
[12:55.6] copy started ...
[12:55.6] generate lazy started ...
[12:56.1] copy finished (17 files) in 516 ms
[13:08.8] generate lazy finished in 13.23 s
[13:08.9] build finished in 17.55 s
[13:09.0] jest args: --coverage --silent -- --e2e --spec
--max-workers=8
No tests found, exiting with code 1
Seems like somehow the double dash is passed into jest directly hence making jest assuming --e2e and --spec is some keyword of the test suite hence filtering out all the existing test suites supposed to be run.
Not sure if this is a known issue or something can be resolved from user side?
I experienced a similar problem in a monorepo project where I'm using nx and pnpm.
My problem
I observed the following behaviour:
When cding into the Stencil project and running pnpm test, the tests ran as expected.
When running nx run stencil-project:test no tests were found.
Investigation
Having a closer look the following happens:
When running the second command, a double-dash was added to the final Stencil command: stencil test --spec --e2e "--".
Stencil pushes all unknown args to Jest, see https://github.com/ionic-team/stencil/blob/main/src/testing/jest/jest-config.ts#L49
Unfortunately for that reason Jest receives the following command: jest --max-workers=8 -- --e2e --spec --max-workers=8
And now the problem happens: Everything after the double dash is used as the pattern --e2e|--spec|--max-workers=8 to filter tests by their name.
As the pattern of course doesn't match any test, they get filtered out.
Screenshot of final Jest error
"Solution"
❌ I started writing a Stencil-PR to remove the first -- in the args, but I wasn't sure if NX or Stencil is to blame and therefore dropped it.
❌ As an alternative I tried to ran Jest manually by recreating Stencil's Jest-config but unfortunately that didn't work out in the end. If someone would provide a solution for that, this would be better.
✅ As it's super hard to influence Stencil's mechanisms (drawback of it being so opinionated) in the end I used a dirty hack: I added '*' to my test-scripts in package.json:
{
"test": "stencil test --spec --e2e '*'"
}
This breaks the pattern and instead runs all tests (Invalid testPattern *|--e2e|--spec|--max-workers=8 supplied. Running all tests instead.)
🎉 Mission accomplished. I hope this helps you, too.

Laravel Mix: ValidationError: CSS Loader has been initialized using an options object that does not match the API schema

I recently tried to run npm run dev and also npm run watch, but I got an error after 80% got compiled. I tried googling it but didn't find the solution to it. Below is the error which I get in my console.
ERROR in ./resources/sass/frontend/app.scss Module build failed (from
./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from
./node_modules/css-loader/dist/cjs.js): ValidationError: Invalid
options object. CSS Loader has been initialized using an options
object that does not match the AP I schema.
options.url should be one of these: boolean | object { filter? } -> Allows to enables/disables url()/image-set() functions handling. -> Read more at
https://github.com/webpack-contrib/css-loader#url Details:
options.url should be a boolean.
options.url should be an object:
object { filter? }
at validate (E:\Web Projects\project\node_modules\webpack\node_modules\schema-utils\dist\validate.js:105:11)
at Object.getOptions (E:\Web Projects\project\node_modules\webpack\lib\NormalModule.js:527:19)
at Object.loader (E:\Web Projects\project\node_modules\css-loader\dist\index.js:31:27)
at processResult (E:\Web Projects\project\node_modules\webpack\lib\NormalModule.js:701:19)
at E:\Web Projects\project\node_modules\webpack\lib\NormalModule.js:807:5
at E:\Web Projects\project\node_modules\loader-runner\lib\LoaderRunner.js:399:11
at E:\Web Projects\project\node_modules\loader-runner\lib\LoaderRunner.js:251:18
webpack.mix.js
const mix = require('laravel-mix');
mix.setPublicPath('public')
.setResourceRoot('../')
.vue()
.sass('resources/sass/frontend/app.scss', 'css/frontend.css')
.sass('resources/sass/backend/app.scss', 'css/backend.css')
.js('resources/js/frontend/app.js', 'js/frontend.js')
.js([
'resources/js/backend/before.js',
'resources/js/backend/app.js',
'resources/js/backend/after.js'
], 'js/backend.js')
.js('resources/js/global.js', 'js/global.js')
.js('resources/js/Banners/banner.js', 'js/banner.js')
.extract([
// Extract packages from node_modules to vendor.js
'alpinejs',
'jquery',
'bootstrap',
'popper.js',
'axios',
'sweetalert2',
'lodash'
])
.sourceMaps();
if (mix.inProduction()) {
mix.version();
} else {
// Uses inline source-maps on development
mix.webpackConfig({
loader: 'url-loader',
devtool: 'inline-source-map'
});
}
Both Frontend.scss & Backend.scss are not getting compiled or mixed and throws up an error given above. When I tried to comment it, it ran properly as expected, but without commenting it, it doesn't. I don't know where I am going wrong here. I also tried to run npm rebuild node-sass and then again tried to run npm run prod, npm run dev & npm run watch, but none worked.
As a workaround, downgrade your css-loader package to a 5.x version.
npm install css-loader#5.2.7 --save-dev

tests failing with SyntaxError: Unexpected token export

After updating a package "office-ui-fabric-react" from "5.124.0 to "6.128.0", all my tests are failing with following error:
FAIL src\***.test.tsx
● Test suite failed to run
\node_modules\office-ui-fabric-react\lib\Callout.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from './components/Callout/index';
^^^^^^
SyntaxError: Unexpected token export
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
If you are using create-react-app, You probably don't want to eject it.
To solve this without ejecting we need to be able to modify jest configuration without eject.
Luckily there is this library https://github.com/timarney/react-app-rewired
Follow its instruction and install react-app-rewired in you CRA project
Then you need to change your package.json to include "jest" configuration
"jest": {
"moduleNameMapper": {
"office-ui-fabric-react/lib/(.*)$": "office-ui-fabric-react/lib-commonjs/$1"
},
"transformIgnorePatterns": [
"node_modules/(?!office-ui-fabric-react)"
]
}
Resource: https://github.com/OfficeDev/office-ui-fabric-react/wiki/Fabric-6-Release-Notes
Update
The latest create-react-app already support moduleNameMapper and transformIgnorePatterns configuration.
So there are no need to use react-app-rewired anymore.
https://create-react-app.dev/docs/running-tests/#configuration
export is used in ES modules, whereas because Jest is run in Node it requires common JS modules. See the docs on transformIgnorePatterns on how to convert it to common JS with your TypeScript setup.

npm start (or yarn start) error with babel when creating react applications

I am trying this article working on a react calculator
I set my package.json with "start": "babel-node ./server/server.js" in the scripts. When I run npm start, errors shows up. yarn start gives more details error message shown there.
max#DESKTOP-4J1U771 MINGW64 ~/Documents/react-calculator (master) $
yarn start yarn run v1.7.0 warning package.json: No license field $
babel-node ./server/server.js
C:\Users\max\Documents\react-calculator\node_modules\babel-core\lib\transformation\file\logger.js:41
throw new Constructor(this._buildMessage(msg));
^
ReferenceError: [BABEL]
C:\Users\max\Documents\react-calculator\server\server.js: Unknown
option: base.0. Check out h ttp://babeljs.io/docs/usage/options/ for
more information about options.
A common cause of this error is the presence of a configuration
options object without the corresponding preset name. Example:
Invalid: { presets: [{option: value}] } Valid: { presets:
[['presetName', {option: value}]] }
For more detailed information on preset configuration, please see
https://babeljs.io/docs/en/plugins#pluginpresets-op tions.
at Logger.error (C:\Users\max\Documents\react-calculator\node_modules\babel-core\lib\transformation\file\logger.j
s:41:11)
at OptionManager.mergeOptions (C:\Users\max\Documents\react-calculator\node_modules\babel-core\lib\transformation
\file\options\option-manager.js:226:20)
at OptionManager.init (C:\Users\max\Documents\react-calculator\node_modules\babel-core\lib\transformation\file\op
tions\option-manager.js:368:12)
at File.initOptions (C:\Users\max\Documents\react-calculator\node_modules\babel-core\lib\transformation\file\inde
x.js:212:65)
at new File (C:\Users\max\Documents\react-calculator\node_modules\babel-core\lib\transformation\file\index.js:135
:24)
at Pipeline.transform (C:\Users\max\Documents\react-calculator\node_modules\babel-core\lib\transformation\pipelin
e.js:46:16)
at Object.transformFileSync (C:\Users\max\Documents\react-calculator\node_modules\babel-core\lib\api\node.js:152:
10)
at compile (C:\Users\max\Documents\react-calculator\node_modules\babel-register\lib\node.js:118:20)
at loader (C:\Users\max\Documents\react-calculator\node_modules\babel-register\lib\node.js:144:14)
at Object.require.extensions.(anonymous function) [as .js] (C:\Users\max\Documents\react-calculator\node_modules\
babel-register\lib\node.js:154:7) error Command failed with exit code
1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this > command.
Does anyone see what's going on here and how to solve it?
Use create-react-app. It is way simpler than configuring babel and creating React projects the old way. To use it, go to the directory you want your project to be in, and type in your terminal: create-react-app [project-name]. This will do all the configuring for you and make it easier for you. The installation and configuration of React mentioned in the article is outdated, but you can still follow everything else in that tutorial. Good luck!

Resources