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
Related
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
I am trying to write some tests for a library I'm making. This is not a creat-react-app project, but something built from scratch with babel. I'm using jest, and I'm having this problem. I saw similar quesitons, but nothing quite like this. I have "test": "jest" in my package.json scripts. I have a __tests__ directory in my root folder. One of my test files, called Component.js, starts with some simple imports:
import React from 'react';
import { MyComponent } from '../src/MyComponent.js';
When I run npm run test, I get this error:
Cannot find module 'react' from '__tests__/MyComponent.js'
> 1 | import React from 'react';
Even if I comment out the react import, I get this error:
Cannot find module 'react' from 'src/MyComponent.js'
Require stack:
src/MyComponent.js
__tests__/MyComponent.js
> 1 | import React from 'react';
This is happening not just with react, but with any node modules imported in the test, or imported in any module that the test imports. I don't understand. Does jest not know to look for these modules in the node_modules folder? I do not have any jest.config.js or any jest property in my package.json - I didn't think I needed one to specify that jest should be looking for these modules in the node_moduldes folder. Do I need to set up some config for jest to look in the node_modules for these type of imports? I feel like there's a simple fix here that's alluding me. Thanks for reading.
Edit: Mocha giving me a similar issue
I thought I woul try and bypass this whole issue by using mocha instead. With a test script of "mocha": "mocha --require #babel/register '**/__tests__/*' -R spec", I get a similar error:
Error: Cannot find module 'react'
Require stack:
- /Users/seth/Documents/GitHub/react-esri-leaflet/__tests__/MyComponent.js
- /Users/seth/Documents/GitHub/react-esri-leaflet/node_modules/mocha/lib/esm-utils.js
- /Users/seth/Documents/GitHub/react-esri-leaflet/node_modules/mocha/lib/mocha.js
- /Users/seth/Documents/GitHub/react-esri-leaflet/node_modules/mocha/lib/cli/one-and-dones.js
- /Users/seth/Documents/GitHub/react-esri-leaflet/node_modules/mocha/lib/cli/options.js
- /Users/seth/Documents/GitHub/react-esri-leaflet/node_modules/mocha/bin/mocha
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:713:15)
What the heck is going on here? Shouldn't these testing libraries know to look in my rootFolder/node_modules for these things? Might something in my package.json or (now obsolete) webpack.config.js file be interfering? Rather than copy those files into this post, you can see them, with the whole project directory, at the repo here: https://github.com/slutske22/react-esri-leaflet
The more I thought about this the more I realized that this is a peerDependencies issue. The dependencies that jest couldn't find were all peerDependencies. If I were to run my package through travisci, it would run npm install and npm test, and it would never install these dependencies or be able to use them in the tests.
Thanks to this question, I copied all my peerDependencies into the devDependencies, reran npm install, and then the tests started working.
Rather than delete the question, I'll leave this here if anyone ever has this specific case happen to them.
I'm trying to get i18n message extracted (defined by react-intl's defineMessages) to work properly in a CRA using TypeScript.
I've got an existing react app bootstrapped by CRA with a couple of hundrets of lines of code. So rewriting the application w/o TypeScript isn't an option.
Here's what i've tried so far:
First Attempt
Following this guide in order to get it to work.
When closely following the guide (although react-intl-cra is deprecated) the language files will generate properly.
However if you create the app using create-react-app react-intl-example --typescript and change the script to
"extract:messages": "react-intl-cra 'src/**/*.{js,jsx,ts,tsx}' -o 'src/i18n/messages/messages.json'"
it will break with a compiler error.
Second Attempt
Since react-intl-cra was refering to a react-app-rewired solution, I've tried adding it alongside customize-cra and babel-plugin-react-intl to a freshly generated CRA (using TS). However no luck there as well and after some short period of research I found that it's officially not supported.
Third attempt:
Adding extract-react-intl-messages to my project and running:
$ npx extract-messages -l=en,ja -o app/translations -d en --flat false 'src/**/!(*.test).tsx'
failed with an error as well.
I ran out of ideas, hence I came here to ask. From what I've seen TypeScript has been well advertised in the last couple of years and I don't think I have to justify that React is still pretty hyped. Moreover I can't imagine, that i18n is an uncommon concern in application development.
However I wasn't able to find any up-to-date guide or anything useful on npmjs.com.
TL;DR;
What I need:
Extract messages from defineMessages from react-intl into json files
Must work in a CRA using --typescript
Should not utilize npm run eject
What I've tried:
react-intl-cra
react-app-rewired + customize-cra + babel-plugin-react-intl
extract-react-intl-messages
It's explained here: https://github.com/akameco/extract-react-intl-messages#typescript
Basically you need to
npm install --save-dev #babel/core #babel/preset-typescript #babel/preset-react
and add
#babel/preset-typescript
to your .babelrc:
{
"presets": [
"#babel/preset-react",
"#babel/preset-typescript"
],
}
Then you can run
npm run extract-messages 'src/**/*.[jt]sx'
When I am testing React components using Jest, I get following error for those components using imports-loader.
Cannot find module 'imports-loader?jQuery=jquery!bootstrap/js/tooltip'
Does anyone know how to fix this?
You should install the missing module:
npm install imports-loader
Here is a question.
I'm trying to merge some of my packages into a monorepo. I'm using yarn and it's workspaces-experimental feature. So the repository folder structure looks like:
.
node_modules
packages
myapp1
myapp2
myreactapp1
Now, one of the goals is to simplify testing. I want to run jest in the root dir so that it runs unit tests for all the packages. And it works for myapp1 and myapp2 above which are node.js apps. However, myreactapp1 is build with create-react-app (no eject) and uses ES6 features (like import) and also jsdom rendering. The tests work fine if I run them from myreactapp1 dir with yarn test which pipes the code through babel (if I understand well). But the root jest failes on the first import statement.
How can I do it ?
P.S. I tried to install babel-jest but seems that it cannot be lauched directly from the console (windows).
It seems that CRA does not yet work properly with Yarn Workspaces. A workaround is suggested in the comments.
Anyway, to make jest work, you need to have babel-jest (as you said) and also a .babelrc file in the root folder:
{
"presets": ["es2015", "react"]
}