8

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"
2
  • I think you should try puting require('@testing-library/jest-dom') and Object.keys(require('@testing-library/react') before expect statement.
    – Michael
    May 17, 2020 at 14:39
  • 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. May 17, 2020 at 17:42

3 Answers 3

2

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

1

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 !

4
  • 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' May 17, 2020 at 17:41
  • 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 ? May 17, 2020 at 18:08
  • Same problem: nothing is being imported, so both are undefined. Tomorrow, I'll try in a new toy clean project. May 17, 2020 at 19:48
  • 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! May 18, 2020 at 8:08
0

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.

3
  • can you add code like package.json for referrence?
    – Fiehra
    Oct 17, 2022 at 18:30
  • @testing-library/react@13 dropped support for React 17 Nov 15, 2022 at 14:42
  • I haven't tried any projects with react 17 for a while so I don't have any idea of how it is now. Nov 20, 2022 at 12:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.