DEV Community

Setting up Jest + React-Testing-Library

aromanarguello on June 29, 2019

In the past few months, I've had the immense pleasure to work with what I can say is my favorite library to use in the React + Friends environment,...

Read full post

skube • Sep 14 '19

I believe the latest version of RTL has cleanup already baked-in.
Also, jest-dom has been scoped to @testing-library.

So, instead of adding the following to setupTests.js (or *.ts):

import '@testing-library/react/cleanup-after-each';
import 'jest-dom/extend-expect';

You should:

yarn remove jest-dom
yarn add -D @testing-library/jest-dom

And then only need to include the following in your setupTests.js (or *.ts):

import '@testing-library/jest-dom/extend-expect'

abe caymo • Dec 26 '19

also note (from docs):
cleanup is only done automatically if the testing framework you're using supports the afterEach global (like mocha, Jest, and Jasmine). If not, you will need to do manual cleanups after each test.

Rodolpho Netto • Sep 25 '19

I having a lot of problems with import




It returns me Cannot find module './dist/extend-expect' from 'extend-expect.js'



even when it is installed =/

  "devDependencies": {
    "@testing-library/dom": "^6.4.0",
    "@testing-library/jest-dom": "github:testing-library/jest-dom",
    "@testing-library/react": "^9.1.4",

skube • Sep 25 '19 • Edited

I think you have it installed incorrectly, my package.json looks like:

 "devDependencies": 
    "@testing-library/jest-dom": "^4.1.0",
    "@testing-library/react": "^9.1.4",
...

Did you add jest-dom with:

yarn add -D @testing-library/jest-dom

Rodolpho Netto • Sep 25 '19 • Edited

Yes, I dont know why it was installed like that... I've followed the docs, but now it is working fine, thank you :)

bkjoel • Jun 29 '19

I think using “getting started” in the header is misleading.. just as you’ve said - “...this guide is a step by step walkthrough on how to set up your testing environment...”.

The “getting started” part is misleading people into thinking that they’ll learn how to actually test using these tools 🤷🏼‍♂️

Might be a good idea to change that part of the title to “setting up..”?

aromanarguello • Jun 29 '19

Thanks for the feedback, I think you are right! I just changed it to what you suggested :)

bkjoel • Jun 29 '19

Thank you for taking my input politely ☺️

Instinct • Nov 6 '20 • Edited

First of all, great article.
@aromanarguello I am having trouble with jest.config.js in create-react-app configuration.
It would be very nice if you could help me.

const { defaults } = require('jest-config');

module.exports = {
    ...defaults,
    testEnviroment: "jest-environment-jsdom-sixteen",
    automock: false,
    verbose: true,
}

Why is this showing me an error whenever I am trying to do npm test?

This is my npm test command in package.json:

"test": "react-scripts test -- --config=jest.config.js"