Is there a way to disable colorized output for tests run via react-scripts test? I'd like to disable this to get rid of the color control codes in our CI pipeline.
With jest you can specify jest --no-colors, but react-scripts test --no-colors does not seem to pass the option down to jest.
FYI, the app was created with create-react-app and the react version is 17.0.0.
"env FORCE_COLOR=0" worked for me.
Neither "npm config set color false" nor "npm --no-color" worked, though.
Neither of the proposed solutions worked for me. ("react-scripts": "5.0.0")
My solution for this was installing as dev dep
"#relmify/jest-serializer-strip-ansi"
and in package.json have this
"jest": {
"snapshotSerializers": [
"#relmify/jest-serializer-strip-ansi/always"
]
},
List of supported jest config overwrites for CRA
https://create-react-app.dev/docs/running-tests/#configuration
Related
I am trying to use Jest with a new CRA project, but I am facing a problem when trying to use the findByText function. I installed:
yarn add -D jest-environment-jsdom-sixteen
And run my tests with react-scripts test --env=jest-environment-jsdom-sixteen. It works fine if I do this solution that I encountered while reading these issues here:
https://github.com/testing-library/dom-testing-library/issues/477
https://github.com/testing-library/react-testing-library/issues/662
https://github.com/testing-library/react-testing-library/issues/731
However I am also using the Jest plugin from VS code and tests do not pass with it. I have tried to do this in my jest.config.js as suggested in the docs:
module.exports = {
testEnvironment: 'jest-environment-jsdom-sixteen',
};
But it still does not work.
Thanks in advance.
Testing MutationObserver with Jest:
Try this, it worked for me, on a similar error:
npm i -D mutationobserver-shim
import "mutationobserver-shim"; in setupTests.js
I would like to output the results of my jest testing to a file format like JUnit without ejecting from react-scripts.
By using the --json command I can output it to JSON but I was hoping to get a format that Jenkins can process by default.
I cant seem to find if this is supported and I don't want to eject from Create React App, is there another way?
You shouldn't need to do anything fancy. Just install jest-junit and then run with the additional reporters flag:
yarn test --reporters=jest-junit
You can also add it to the jest settings of package.json. Probably something like this:
{
"name": "your-package",
"jest": {
"coverageReporters": ["jest-junit"]
}
}
I was able to do this with npm and the jest-teamcity reporter by modifying the package.json file.
{
...
"scripts": {
...
"test": "cross-env CI=true react-scripts test --env=jsdom --reporters=jest-teamcity",
...
},
...
}
I have set up a project using ionic framework v4 with React and wish to add a webpack loader to allow importing graphql queries from .graphql files, as described here.
I can't find any official documentation on how to change anything relating to webpack (for example, nothing here), and existing answers on the subject seem to apply only to using Angular or v2/v3 of ionic.
The Apollo docs describe an alternative way of solving this for Create-React-App (which I may try as a workaround), but I might wish to change webpack config in other ways, so I am also asking how to solve this question more generally.
You can customize webpack using react-app-rewired
If you don't use ionic cli to build and run your app, you can use a normal install of react-app-rewired.
If you use the ionic cli, there is an additional step/trick:
Ionic uses react-scripts under the hood, so you need to trick it into using react-app-rewired instead of react-scripts.
Here is a simple and low-invasive way to have Ionic cli use react-app-rewired instead of react-scripts: add this package.json postinstall script:
{
"scripts": {
"postinstall": "cd node_modules/.bin && mv react-scripts react-scripts-real && ln -s ../react-app-rewired/bin/index.js react-scripts",
...
}
}
Update: This fails when you run ionic build because it defaults back to using react-scripts build.
Not sure why I didn't see this before, but taking a closer look at the bootstrapped ionic project, it’s clearly using create-react-app/react-scripts.
Although CRA demands you do a one-time eject in order to configure anything relating to the build, I was able to use react-app-rewired and customizable-cra to customise the build and start scripts. As far as I can tell this works fine with ionic.
I am working on an application that was recently converted from an old Webpack build to use create-react-app. Most of the transition has went smoothly, but I'm running into some major issues with the previous unit tests. When I run npm test which has the standard package.json test script of "test": "react-scripts test --env=jsdom", it says all my snapshot tests have failed. This is fine and expected since there have been a lot of changes, and the tests need to be updated.
However, when I just run jest or jest --updateSnapshot, all of my tests immediately fail with SyntaxError: Unexpected token errors, most of which are related to import. This leads me to believe that Jest isn't using Babel to transform the ES6 syntax correctly.
Previously, we used a .babelrc file with these settings:
{
"presets": ["env", "react", "stage-0", "flow"],
"plugins": ["transform-runtime", "add-module-exports", "transform-decorators-legacy"]
}
But since Babel is already included in create-react-app I removed this file as well as any references to Babel. My package.json also does not have any special scripts set up for Jest itself.
I have tried adding some of the previously used Babel packages back in, but after further reading it seems those won't work anyway unless I eject from create-react-app and that is not an option at this time.
What would cause npm test to run correctly but jest to fail miserably?
It turns out it was a Babel issue. Even though create-react-app comes pre-configured, we still had to add in custom configuration since our app wasn't initially built with cra. I installed some new dev dependencies:
"babel-cli": "^6.26.0",
"babel-jest": "^22.4.1",
"babel-preset-react-app": "^3.1.1",
And also updated the .babelrc:
{
"presets": ["babel-preset-react-app"]
}
And now both jest and npm test both work as they should.
I am using semantic-ui-react and I am trying to create snapshot tests using jest. However, I keep getting this message. Could someone shed some light on this? I am using semantic with nextjs.
console.error node_modules/fbjs/lib/warning.js:36
Warning: ReactTestUtils has been moved to react-dom/test-utils. Update references to remove this warning.
console.error node_modules/semantic-ui-react/dist/commonjs/lib/debug.js:30
Semantic-UI-React could not enable debug.
console.error node_modules/semantic-ui-react/dist/commonjs/lib/debug.js:31
TypeError: Cannot read property 'debug' of undefined
This warning is produced when debug can't deal with localStorage, but it shouldn't be called for tests. Make sure that the ENV vars are set correctly, you need to have NODE_ENV=test.
For those who can't solve the problem with setting NODE_ENV=test. Anotherr option is to use or extend some test setup script (ie mocha -r setup.js):
// if you run Enzyme tests then you probably already have this import which creates global.window object
import 'jsdom-global/register'
global.window.localStorage = {};
For me both options work. I am running my tests on Linux.
Are you on Windows? If so, how do you execute the tests? I was facing the same issue earlier and was able to resolve it.
I had the following in my package.json:
"run_test" : "set NODE_ENV=test && npm run test",
"test": "./node_modules/.bin/mocha --compilers js:babel-core/register --recursive",
The problem with this, however, is that windows will set your NODE_ENV as "test " and not as "test", notice the trailing whitespace. The solution for me was to fix write the scripts by removing the whitespace:
"run_test" : "set NODE_ENV=test&&npm run test",
"test": "./node_modules/.bin/mocha --compilers js:babel-core/register --recursive",