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",
Related
I have a React 17 / Typescript 4.5 project. package.json looks like this:
...
"scripts": {
"start": "react-scripts start",
"build": "yarn run tsc --build"
}
My code has some Typescript errors that don't cause issues at runtime. When I run react-scripts start, the code builds and runs successfully in the browser, and React turns the errors into warnings that show up on initial page load. Conversely, when I run yarn run tsc --build, I can't compile the project due to the errors.
Yes, of course I should fix the errors, and I will. But while my code is rapidly evolving, solving certain tricky Typescript problems is premature. It may be useful to compile the code and temporarily ignore the errors.
I realize I can turn off specific errors in tsconfig.json, but I'd like to temporarily ignore all errors (at least, ones where Javascript can still be emitted).
Basically, what I want is a tsc flag that turns errors into warnings, but according to this related question, that doesn't exist. So how does react-scripts manage this? How can I compile my project in spite of the errors?
react-scripts uses a webpack plugin called ForkTsCheckerWebpackPlugin (see this line), which runs TypeScript type checking in a separate process and isn't actually used to transform your code from TypeScript to JavaScript before you run it. Instead, it looks like create-react-app uses #babel/preset-typescript (see this line), which doesn't perform any type checking but rather transpiles your code from TypeScript to JavaScript, so that's why your code is still able to run with TypeScript errors since Babel doesn't actually do any type checking with your code.
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
We have bootstrapped a create react app project using typescript and use react-testing-library for our unit tests.
We have noticed that, as we have updated our props and types, tests are still running and passing which is very worrying indeed.
As an example, we have a className which is a typescript DU. The test is using an unexpected value for className which this screen shot shows:
But the test still runs and show as as successful. If I open the VS CODE problems tab, it correctly shows as an issue:
The question is, why is the test still building and passing, is extra configuration needed to get typescript errors to work with jest/react-testing-library?
I would like these errors to prevent tests from running in the first instance to highlight an issue with props.
This is just one example, we have other tests were required props are completely missing yet the tests still run and pass
Applies to react-scripts 3.4.1 and 4.0
A colleague has kindly but together an example repo on github
One option is to run the TypeScript compiler to check the types before running the tests. For example, update the "test" script in package.json to:
"test": "tsc --noEmit && react-scripts test",
I'm using jest and enzyme with my create-react-app project. When I run npm test, I get an output that shows the names of the test files that passed but I'd like the output to also include the names of the tests.
Example:
Button.test.js
it ('renders button', () => {
const button = shallow(<Button type="save"/>);
expect(toJson(button)).toMatchSnapshot();
});
Right now when I run npm test the output is just:
PASS src/Button.test.js"
and the number of passed and failed tests (when the tests are successful). I would like the output to include "renders button" and any other test descriptions (like how the output looks when an rspec test is run).
From Jest's command-line options docs
--verbose
Display individual test results with the test suite hierarchy.
So running
jest --verbose
Will print all the names in describe, it, test blocks.
If you're running tests with yarn, you can do
yarn test --verbose
If you're running tests with npm, you can do
npm test -- --verbose
If you want to make this default, change your test script in package.json
"test": "react-scripts test --env=jsdom --verbose",
Now both yarn test and npm test should show all test names.
Note that, instead of
jest --verbose
you can also set verbose to true in jest.config.js:
// jest.config.js
module.exports = {
...
verbose: true,
}
The --verbose flag sounds like it might do what you are looking for. According to the docs, it displays individual test results.
I was having the same issue with create-react-app (using both jest and enzyme), but was able to get the tests to appear after appending the existing test script in package.json with --verbose=true. So it now appears "test": "react-scripts test --env=jsdom --verbose=true"
after doing this configuration in package.json( "test": "react-scripts test --env=jsdom --verbose",) try running your test by npm test.
Note : with npm run test description is not reflecting for me as well.
In all my components i have imported other components like
import PrevArrow from 'components/Slider/PrevArrow';
when I want to test a component I always get the error:
Error: Cannot find module 'components/Slider/PrevArrow'
because it assumes the wrong path.
Right import method would be
import PrevArrow from '../../components/Slider/PrevArrow';
with this the test passes, but I dont want to refactor all components just because of this.
Is there a way that i can leave my import statements as they are and still get my test passed?
Thanks in advance!
Turns out it is because we are using webpack in our codebase.
So mocha will not work as it should.
I needed to install
npm install --save-dev mocha-webpack
and rewrite my test script in package.json from
"test": "mocha './build/**/*.test.js' --compilers js:babel-core/register --require ignore-styles"
to
"test": "mocha-webpack --webpack-config webpack.config.js './build/**/*.test.js'"
and now it works