@testing-library/jest-dom не загружается

Question

Я пытаюсь внедрить библиотеку тестирования React в проект Create React App, и у меня возникает странная проблема. Для одного из моих тестов мне нужно использовать jest-dom, но я не могу его успешно импортировать.

Я yarn addЯ не могу вспомнить, какой шаг я пропустил.expect.extend терпит неудачу, потому что это toHaveStyle не определено.

Вот мой тестовый файл, уменьшенный до минимума:

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);
});

Результат:

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

И вот соответствующая часть 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"

Answer 1

Что ж, обновлена ​​документация по jest-dom.

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

больше не будет работать. Вместо,

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

Для справки см. Jest-dom

Answer 2

Вот как я использую эту замечательную библиотеку:

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

[...]

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

Мой импорт немного отличается от вашего, я не могу точно сказать, что не так с вашим, но я так делаю.

Удачи!

Answer 3

модуль не найден, не может разрешить node_modules\react-scripts\node_modules\babel-loader\lib\index.js' в реакции 17

Итак, если кто-то смотрит на это в 2022+ году, после перехода с react-v18 на react-v17 я столкнулся с этой проблемой. Мне нужно было выполнить определенные команды.

1. установка npm [электронная почта защищена]

2. npm установить babel-загрузчик --save-dev

3. npm install -D babel-loader @babel/core @babel/preset-env веб-пакет

Я также переместил свою @testing-library/jest-dom,@testing-library/react,@testing-library/user-event в devDependencies и понизил их рейтинг.

Работал как шарм.