Как использовать 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'
]
}