Как использовать Jest-dom при тестировании приложения React?

Я новичок в тестировании своего кода. Я пытался использовать jest-dom, чтобы проверить, отображается ли компонент реакции при нажатии кнопки. Я пробовал следовать советам людей, у которых возникла аналогичная проблема, но пока ни один из ответов мне не помог. Сообщение об ошибке, которое я получаю при запуске теста:

        TypeError: _react.screen.getByLabelText(...).toBeInTheDocument is not a function

      26 |
      27 |         userEvent.click(screen.getByText(/Add Entry/));
    > 28 |         expect(screen.getByLabelText(/title/i).toBeInTheDocument());
         |                                                ^
      29 |     })
      30 | })

      at Object.<anonymous> (src/Components/Entry/entry.test.js:28:48)

entry.test.js

      import { getAllByRole, getByRole, getByText, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import {createMemoryHistory} from "history";
import { Router } from "react-router";
import EntryForm from "../EntryForm/entryForm";
import Sidebar from "../Sidebar/Sidebar"
import "@testing-library/jest-dom/matchers";

describe("Test Entry", () => {
    it("should render entry form",() => {
        const history = createMemoryHistory();
        const route = "/";
        history.push(route);
        let entries = [];

        render(
            <Router history={history}>
                <Sidebar entries={entries} />
                <EntryForm />
            </Router>
        )

        
        
        
        
        userEvent.click(screen.getByText(/Add Entry/));
        expect(screen.getByLabelText(/title/i).toBeInTheDocument());
    })
})

package.json

       "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest -c jest.config.js --watch",
    "eject": "react-scripts eject"
  },
 "devDependencies": {
    "@testing-library/jest-dom": "^5.12.0"
  }
  

jest.config.js

      module.exports = {
    roots:['note_app/src'],
    transform:{
      '\\.(js|jsx)?$': 'babel-jest',
    },
    testMatch: ['note_app/src/**/(*.)test.{js,jsx}'],
    moduleFileExtensions:['js','jsx','json','node'],
    testPathIgnorePatterns: ['/node_modules/','/public'],
    setupFilesAfterEnv: [
        '@testing-library/jest-dom/extend-expect',
        '@testing-library/react/cleanup-after-each'

    ]
}

0 ответов

Другие вопросы по тегам