I am currently starting to learn about how to write tests in React and I am facing issues to make my IDE (Webstorm) recognize my .test.js files and apparently recognize jest itself.
On my course, a 2017 course, I have learned that jest would be set on my package.json file as it would be part of the react-create-app library. I did not identify the dependency installed at my package.json file inside the "dependencies" part when I started following up with the course module.
I had then installed jest along with the following dependencies as per listed below:
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"react-test-render": "^1.1.2",
"enzyme-to-json": "^3.4.4",
The first issue was with a conflict of dependencies which had broken my app. It seems that the most recent version of jest is not accepted by react-scrips latest version 3.4.1. So I had to downgrade the jest version to 24.9.0 in order to run my app again on development mode.
Then I have created a file to learn my first testing skills and I have noticed that describe() is not being recognized at all.
I don't know what to do to make it work. I don't know if this is still the best set up to write tests as well, as this is a 2017 React course.
Please see my package.json file:
{
"name": "veggie-burguers",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.1.2",
"axios": "^0.19.2",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"enzyme-to-json": "^3.4.4",
"jest": "^24.9.0",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"react-test-render": "^1.1.2",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
After running yarn test I got two errors:
1st -
Could not find "store" in the context of "Connect(withRouter(App))". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(withRouter(App)) in connect options.
4 |
5 | test('renders learn react link', () => {
> 6 | const { getByText } = render(<App />);
| ^
7 | const linkElement = getByText(/learn react/i);
8 | expect(linkElement).toBeInTheDocument();
9 | });
Question: Should I also set redux in my App.test.js file? It is all set up and working on my root index.js file
2nd -
react-scripts test
FAIL src/components/Navigation/NavigationItems/NavigationItem/NavigationItems.test.js
● Test suite failed to run
Your test suite must contain at least one test.
My above mentioned test file, namely NavigationItems.test.js is really empty, as obviously the IDE is not even recognizing jest inside of it when I write describe() it accuses the function to be unresolved.
In case there is more info needed I will update this enquiry accordingly.
The issue was that Webstorm was not recognizing jest in my ...test files. So I have changed the title of the question here for this reason, which is just IDE related.
Solution :
In Webstorm => Preferences => Languages & Frameworks => JavaScript => Libraries, press Download..., select 'jest' from the list of available stubs, press Download and Install.
After this, jest is recognized properly and I can use its features.