DEV Community

Cover image for Setup Jest and React Testing Library in a React project | a step-by-step guide

Setup Jest and React Testing Library in a React project | a step-by-step guide

Ivad Yves HABIMANA on May 17, 2022

Not long ago that I came across with the concept of testing specifically "writing tests". I used to test everything by opening browsers and doing e...
Collapse
 
sysionbit profile image
Sysion-bit • Edited

Everything looks very simple and clear, thanks for the guide. I just recently started diving into the world of programming by picking up math from textbooks with plainmath.net/textbooks/math/calculus just for myself. So now I'm collecting different guides to better understand how it all works and where to start. I'm interested in learning React now and I'm thinking of taking some more courses to get practical skills and a certificate to work with.

Collapse
 
malikidrees profile image
Malik-Idrees

The series is going great :)

Collapse
 
adeodatus profile image
Adeodatus Abdul

Wow.. It work. thank you

Collapse
 
sarahfarjallah profile image
sarahFarjallah • Edited

I did exactly what you did but I'm getting Syntax Error can't use import outside of module.

This is my package.json

{
"engines": {
"node": "14.20.0",
"npm": "6.x.x"
},
"name": "ui-v2",
"version": "0.1.0",
"private": true,
"dependencies": {
"@amcharts/amcharts3-react": "^3.1.1",
"@amcharts/amcharts4": "^4.10.35",
"@emotion/react": "^11.11.0",
"@emotion/styled": "^11.11.0",
"@material-ui/core": "^4.12.4",
"@mui/icons-material": "^5.11.16",
"@mui/material": "^5.13.0",
"@reduxjs/toolkit": "^1.9.5",
"file-saver": "^2.0.5",
"firebase": "^9.9.0",
"inflected": "^2.1.0",
"javascript-color-gradient": "^2.4.4",
"jquery": "^3.7.0",
"jqueryui": "^1.11.1",
"moment": "^2.29.4",
"plotly.js": "^2.23.0",
"rc-slider": "^9.7.5",
"react": "^17.0.2",
"react-cookies": "^0.1.1",
"react-dom": "^16.14.0",
"react-dropdown-tree-select": "^2.8.0",
"react-grid-layout": "^1.3.4",
"react-helmet": "^6.1.0",
"react-https-redirect": "^1.1.0",
"react-phone-input-2": "^2.15.1",
"react-plotly.js": "^2.6.0",
"react-popup": "^0.10.0",
"react-redux": "^8.0.5",
"react-router-dom": "^5.3.4",
"react-scripts": "^5.0.1",
"react-select": "^4.3.1",
"react-table": "6.9.0",
"react-trello": "^2.2.11",
"redux": "^4.2.0",
"shortid": "^2.2.16",
"tabulator-tables": "~4.9.3",
"uikit": "~3.11.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"coverage": "jest --coverage",
"eject": "react-scripts eject"
},
"client": {
"machine_name": "pi",
"categoryToolkit": true,
"isAdmin": true,
"version": "2.87.0.17"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"@babel/plugin-transform-private-property-in-object": "^7.21.11",
"@redux-devtools/core": "^3.13.1",
"@svgr/webpack": "^6.2.1",
"@testing-library/jest-dom": "^6.1.5",
"@testing-library/react": "^14.1.2",
"eslint-plugin-jest": "^27.6.0",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"resolve-url-loader": "^5.0.0",
"webpack-dev-server": "~4.10.0"
},
"overrides": {
"@svgr/webpack": "$@svgr/webpack",
"resolve-url-loader": "$resolve-url-loader",
"webpack-dev-server": "$webpack-dev-server"
}
}

my jest.config and jest.setup are exactly the same
What am i missing here?

Collapse
 
ivadyhabimana profile image
Ivad Yves HABIMANA

@sarahfarjallah Try also adding "type": "module" in your package.json

Collapse
 
sarahfarjallah profile image
sarahFarjallah

Sadly it didn't work

Collapse
 
digitalrisedorset profile image
Herve Tribouilloy • Edited

My project is a typescript one, so I changed the config you suggest to the below and it works pretty well. Practical read, great help, thanks
module.exports = {
collectCoverage: true,
collectCoverageFrom: ['src/**/*.{ts,tsx}'],
coverageDirectory: 'coverage',
testEnvironment: 'jsdom',
setupFilesAfterEnv: ['<rootDir>/jest.setup.js']
}

Collapse
 
shubham12346 profile image
Shubham Agrahari

It works thanks , This article is really helpful , but one question in my project there is file setupTests.js in which import '@testing-library/jest-dom' is done and works but doing a separte file jest.setup.js does 'nt work

Collapse
 
jboiero profile image
jboiero

I have a problem in my project. Previously, enzyme and jest were used for testing. But when we updating the react version, enzyme became deprecated. So it was decided to start using Jest with React testing library.
I did all the installation´s steps that is detailed in this post, but when running jest I get the error TypeError: Cannot destructure property 'config' of 'cacheKeyOptions' as it is undefined. Could someone help me to solve it?

Collapse
 
andrewbaisden profile image
Andrew Baisden

Nice easy to follow guide.

Collapse
 
paolobiavati profile image
Paolo Biavati

It is depressing to read create a .js (JAVASCRIPT FILE) file and write import "@testing-library/jest-dom" (TYPESCRIPT SYNTAX)

Collapse
 
heero7 profile image
Kevin Mudiandambo

Thank you again!!

Collapse
 
nikkuv profile image
Saumya Verma • Edited

I'm getting this error, spent hours on this but it is still like this
Image description

Collapse
 
dev_prox_c09316b57d756937 profile image
Dev Prox

Helo saumya , the same error log i too got
Had u still stuck here ?

Collapse
 
ivadyhabimana profile image
Ivad Yves HABIMANA • Edited

@dev_prox_c09316b57d756937 did you try adding "type": "module" in your package.json?

Thread Thread
 
nikkuv profile image
Saumya Verma

Yes, but it was not working even after that.

Collapse
 
jjaijg profile image
Jai Ganesh J

very nice series!