Библиотека тестирования реакции, почему toBeInTheDocument() не является функцией

toBeInTheDocument не является частью RTL. Вам нужно установить шутка, чтобы включить его.

А затем импортируйте его в свои тестовые файлы: import '@testing-library/jest-dom'

Как упомянул Джорджио, вам нужно установить jest-dom. Вот что сработало для меня:

(Я использовал машинописный текст)

npm i --save-dev @testing-library/jest-dom

Затем добавьте импорт в свой setupTests.ts.

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

Затем в вашем jest.config.js вы можете загрузить его через:

"setupFilesAfterEnv": [
    "<rootDir>/src/setuptests.ts"
  ]

Вместо того, чтобы делать:

    expect(queryByText('test')).toBeInTheDocument()

вы можете найти и проверить, что он находится в документе всего одной строкой, используя

    let element = getByText('test');

Тест завершится ошибкой, если элемент не будет найден с помощью вызова getBy.

Когда вы это сделаете npm i @testing-library/react, убедитесь, что в нем есть файл setupTests.js со следующим оператором

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

Некоторые из принятых ответов были в основном правильными, но некоторые могут быть немного устаревшими: Некоторые ссылки, которые хороши на данный момент:

• https://github.com/testing-library/jest-дом
• https://jestjs.io/docs/configuration

Вот все, что вам нужно:

1. в <rootDir> проекта (где находятся package.json и jest.config.js) убедитесь, что у вас есть файл с именем jest.config.js, чтобы Jest мог автоматически выбрать его для настройки. Файл написан на JS, но структурирован аналогично package.json.
2. Убедитесь, что вы ввели следующее:

  module.exports = {
    testPathIgnorePatterns: ['<rootDir>/node_modules', '<rootDir>/dist'], // might want?
    moduleNameMapper: {
      '@components(.*)': '<rootDir>/src/components$1' // might want?
    },
    moduleDirectories: ['<rootDir>/node_modules', '<rootDir>/src'],
    setupFilesAfterEnv: ['<rootDir>/src/jest-setup.ts'] // this is the KEY
    // note it should be in the top level of the exported object.
  };

3. Также обратите внимание, что если вы используете машинописный текст, вам необходимо убедиться, что ваш файл jest-setup.ts скомпилирован (поэтому добавьте его в src или в список элементов для компиляции в вашем tsconfig.json.

4. В верхней части файла jest-setup.ts/js (или как вы хотите назвать эту точку входа) файла: добавьте import '@testing-library/jest-dom';.

5. Вы также можете убедиться, что он действительно работает, поэтому поставьте console.info('hello, world!');. У вас также есть возможность добавить любые глобальные функции, которые вы хотели бы иметь в шутку, например (global.fetch = jest.fn()).

6. Теперь вам действительно нужно установить @testing-library/jest-dom: npm i -D @testing-library/jest-dom в консоли.

С этими шагами вы должны быть готовы использовать jest-dom:

Без ТС: вам еще нужно:

1. npm i -D @testing-library/jest-dom
2. Создание jest.config.js и добавление к нему как минимум: module.exports = { setupFilesAfterEnv: ['<rootDir>/[path-to-file]/jest-setup.js'] }.
3. Создание [path-to-file]/jest-setup.js и добавление к нему: import '@testing-library/jest-dom';.

Файл jest-setup также является отличным местом для настройки тестов, таких как создание специальной функции renderWithProvider( или настройка глобальных оконных функций.

Попробовав все советы в этом посте, и они все еще не работают для меня, я хотел бы предложить альтернативное решение:

Установите шутку-дом:

npm i --save-dev @testing-library/jest-dom

Затем создайте файл setupTests.js в каталог src (этот бит важен! Он был у меня в корневом каталоге, и это сработало с нет...). Сюда поместите:

import '@testing-library/jest-dom'

(или require(...), если вам так больше нравится).

Это сработало для меня :)

Мне было трудно решить эту проблему, поэтому я считаю важным отметить следующее, если вы используете CREATE REACT APP для своего проекта:

1. Вам НЕ нужен файл jest.config.js, чтобы решить эту проблему, поэтому, если он у вас есть, вы можете удалить его.
2. НЕ НУЖНО ничего менять в package.json.
3. Вы ДОЛЖНЫ назвать свой установочный файл шутки setupTests.js и поместить его в папку src. НЕ БУДЕТ работать, если ваш установочный файл называется jest.setup.js или jest-setup.js.

1. установить необходимые пакеты

   npm install --save-dev @testing-library/jest-dom eslint-plugin-jest-dom

2. создайте jest-setup.js в корневой папке вашего проекта и добавьте

   импортировать '@testing-library/jest-dom'

3. в jest.config.js

   setupFilesAfterEnv: ['/jest-setup.js']

4. только TypeScript, добавьте следующее в файл tsconfig.json. Кроме того, изменить расширение .js на .ts.

   "включить": ["./jest-setup.ts"]

toBeInTheDocument() и многие подобные функции не являются частью React-testing-library. Требует установки дополнительного пакета.

Ни один из ответов не сработал для меня, потому что я допустил глупую ошибку, набрав toBeInDocument() вместо toBeInTheDocument(). Может быть, кто-то еще сделал ту же ошибку :)