@testing-library/jest-dom not loading

Question

I'm trying to introduce React Testing Library into Create React App project, and I'm hitting a strange problem. For one of my tests, I need to use jest-dom, but I can't seem to import it successfully.

I've yarn add'ed it, and can't think of what step I missed. expect.extend fails because its toHaveStyle is undefined.

Here's my test file, reduced down to the minimum:

import React from 'react';
import {render, screen} from '@testing-library/react';

import {toHaveStyle} from '@testing-library/jest-dom';
import '@testing-library/jest-dom/extend-expect';
//expect.extend({toHaveStyle});

it('is confusing me', () => {
  // (Using `toBe(42) as an ersatz `console.log`)
  expect([Object.keys(require('@testing-library/jest-dom')), Object.keys(require('@testing-library/react')), toHaveClass]).toBe(42);
});

The output is:

  Expected: 42
    Received: [[], ["render", "cleanup", "fireEvent", ...], undefined]

And, here's the relevant part of yarn.lock:

"@testing-library/jest-dom@^5.7.0":
  version "5.7.0"
  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.7.0.tgz#b2e2acb4c088a293d52ba2cd1674b526282a2f87"
  integrity sha512-ZV0OtBXmTDEDxrIbqJXiOcXCZ6aIMpmDlmfHj0hGNsSuQ/nX0qPAs9HWmCzXvPfTrhufTiH2nJLvDJu/LgHzwQ==
  dependencies:
    "@babel/runtime" "^7.9.2"
    "@types/testing-library__jest-dom" "^5.0.2"
    chalk "^3.0.0"
    css "^2.2.4"
    css.escape "^1.5.1"
    jest-diff "^25.1.0"
    jest-matcher-utils "^25.1.0"
    lodash "^4.17.15"
    redent "^3.0.0"

"@testing-library/react@^10.0.4":
  version "10.0.4"
  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-10.0.4.tgz#8e0e299cd91acc626d81ed8489fdc13df864c31d"
  integrity sha512-2e1B5debfuiIGbvUuiSXybskuh7ZTVJDDvG/IxlzLOY9Co/mKFj9hIklAe2nGZYcOUxFaiqWrRZ9vCVGzJfRlQ==
  dependencies:
    "@babel/runtime" "^7.9.6"
    "@testing-library/dom" "^7.2.2"
    "@types/testing-library__react" "^10.0.1"

Barrett

I think you should try puting require('@testing-library/jest-dom') and Object.keys(require('@testing-library/react') before expect statement. – Bose

Thanks, but that's not it. I had that line commented out because the earlier ones were not working, and am displaying the problem now with the expect ...(42) at the end. – Barrett

Answer 1

Well, jest-dom documentation has been updated.

import {toHaveStyle} from '@testing-library/jest-dom';

would not work anymore. Instead,

import {toHaveStyle} from '@testing-library/jest-dom/matchers'

For reference, see jest-dom

Thereon

Answer 2

Here is how I use this great library :

// in test file
import '@testing-library/jest-dom/extend-expect';

[...]

// then matchers are available in tests
expect(rtl.getByText('text').toHaveClass('some-class');

My import is slightly different than yours, I could not say precisely what goes wrong with yours but this is how I do.

Good luck !

Rutile

That has the same problem for me. I suspect that the two imports are essentially equivalent and that I have a problem earlier. Does your yarn.lock look the same as mine? Do you have any other plumbing lines anywhere? (All that I have is the original Create React App files, and the package.json and yarn.lock from 'yarn add --dev @testing-library/react' and `yarn add --dev @testing-library/jest-dom' – Barrett

My yarn.lock is similar to yours, a few versions behind but not much. Did you try with just the same import as mine ? What do you get when trying to use toHaveClass ? – Rutile

Same problem: nothing is being imported, so both are undefined. Tomorrow, I'll try in a new toy clean project. – Barrett

I created a brand new project with yarn create react-app mytoy and everything is working fine. The package.json starts off with a slightly newer version of React (16.13.1, rather than16.13.0) and many other deps updated. It also has @testing-library/react and /jest-dom directly in dependencies from the get-go (and, not in dev-dependencies). I should be good now ... just need to roll the newer deps intom my project and check that nothing breaks. I don't really understand what went wrong, but I can live with that. Thanks for your help! – Barrett

Answer 3

module not found can't resolve node_modules\react-scripts\node_modules\babel-loader\lib\index.js' in react 17

Okay so if there is anyone looking at this in 2022+ year, After downgrading from react-v18 to react-v17 I faced this issue. I had to run certain commands.

1. npm install [email protected]

2. npm install babel-loader --save-dev

3. npm install -D babel-loader @babel/core @babel/preset-env webpack

I also moved my @testing-library/jest-dom,@testing-library/react,@testing-library/user-event to devDependencies and downgraded them

Worked like a charm.

Fries

can you add code like package.json for referrence? – Champion

@testing-library/react@13 dropped support for React 17 – Briscoe

I haven't tried any projects with react 17 for a while so I don't have any idea of how it is now. – Fries