Today we are going to learn how we can integrate tests with Jest that allow us to test the React components created.
The first thing we have to do is install Jest
npm install --save-dev jest
Install testing-library/jest-dom
npm install --save-dev @testing-library/jest-dom
We installed ts-jest
npm install --save-dev ts-jest
We installed
npm install --save-dev babel-jest
We will install React testing library:
npm install --save-dev @testing-library/react
If we use TypeScript
npm install --save-dev @testing-library/react @types/react-dom @types/react
Moreover for typescript
npm i --save-dev @types/jest
Now let’s create the folder structure for our Jest tests
Create only folders, no need to add scripts. In the next steps, we will add the scripts.
And let’s initialize jest
npm init jest@latest
First ask if you want to include the command test within package.json. Put Yes Then it asks if we have TypeScript, if so put Yes and if not No The environment for testing is used node.
We will not ask if we want coverage reports, in my case I do want to generate the coverage file and select v8.
If I want to clean up contexts, results… after each test mark Y.
Finally it creates the configuration in jest.config.ts Returns will have to be installed:
npm install --save-dev ts-node
Returns only the HTML translated, without any added.
Returns only the HTML translated, without any added.
If we get an error on module.exports from .eslint, add this to the file .eslintrc.cjs
env: { browser: true, es2020: true, node: true, commonjs: true, jest:true},
If we use TypeScript inside the file tsconfig.json we add in compilerOptions:
Now let’s implement a first Unitary test of a button component
To test this element, we will create within tests/unit/components the file Button.test.js If we want to nest different tests, we can use the describe function:
And now we can execute the test
npm run test
