0

Изучаю React testing library по туториалам. Делаю все как рассказывают. Для экспериментов выбрал один из старых тренировочных проектов на Реакт. У меня по каким-то причинам не работает ни один стандартный, даже самый простой тест - всегда ошибка:

TypeError: expect(...).toBeInTheDocument is not a function

Установка jest-dom не помогает.

Пробовал, например, тестировать отрисовку этого компонента (публикую в сокращениях):

const Todo: React.FC = () => {

return (
    <WrappedTodo error={error}>
        <div className="head">
            <h3>My To Do List</h3>
            <div className="controls">
                <Input
                    type="text"
                    placeholder='введите что-нибудь'
                    value={value}
                    handleChange={handleChange}
                />
                <Button
                    text='Добавить'
                    type='button'
                    handleClick={handleClick}
                />
            </div>
            <p className='error'>Вы ничего не ввели</p>
        </div>
    </WrappedTodo>
    );
};

export default Todo;

Создал файл Todo.test.js на одном уровне с Todo.tsx. Написал тест:

import { render, screen } from "@testing-library/react";
import Todo from "./Todo";

test('render Todo', () => {
    render(<Todo/>);
    const linkElement = screen.getByText(/My To Do List/i);
    expect(linkElement).toBeInTheDocument();
})

Пробовал альтернативный синтаксис:

test('render Todo', () => {
    const { getByText } = render(<Todo/>);
    const linkElement = getByText(/My To Do List/i);
    expect(linkElement).toBeInTheDocument();
})

Еще варианты:

test('render Todo', () => {
    render(<Todo/>);
    const linkElement = screen.getByText(/Добавить/i);
    expect(linkElement).toBeInTheDocument();
})

test('render Todo', () => {
    render(<Todo/>);
    const linkElement = screen.getByPlaceholderText('введите что-нибудь');
    expect(linkElement).toBeInTheDocument();
})

Ни один вариант не работает - консоль пишет ошибку.

1 ответ 1

1

Если у тебя уже установлен jest-dom, то в файле Todo.test.js нужно импортировать jest-dom.

Пример:

import { render, screen } from "@testing-library/react";
import '@testing-library/jest-dom/extend-expect'; // нужно добавить эту строку
import Todo from "./Todo";

То же самое нужно писать во всех тестовых файлах.

У меня так сработало.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.