Функция ReactDOM act () вызывает путаницу при использовании Enzyme - PullRequest
Новая
       65

Функция ReactDOM act () вызывает путаницу при использовании Enzyme

0 голосов
/ 09 мая 2020

Я пытаюсь написать модульный тест, чтобы убедиться, что мой компонент для изменения пароля пользователя вызывает правильные функции внутри onSubmit при отправке формы. Есть несколько других тестов, использующих тот же метод, что и этот, и все они проходят и дают одну и ту же ошибку.

Вот один из тестов: 

import { act } from "react-dom/test-utils";

it("should render an Alert component if password and confirmPassword do not match", async () => {
    global.scrollTo = jest.fn();
    const wrapper = mount(
        <Provider store={reduxStore}>
            <Router>
                <ChangePassword />
            </Router>
        </Provider>
    );

    pwFuncs.checkCurrentPassword = jest.fn(() => true);
    pwFuncs.comparePW = jest.fn(() => false);

    const fakeEvent = {
        preventDefault: () => console.log("Prevent default..."),
    };

    wrapper
        .find("input")
        .at(0)
        .simulate("change", {
            target: { name: "currentPassword", value: "password1234" },
        });
    wrapper
        .find("input")
        .at(1)
        .simulate("change", {
            target: { name: "newPassword", value: "1234drowssap" },
        });
    wrapper
        .find("input")
        .at(2)
        .simulate("change", {
            target: { name: "confirmPassword", value: "password4321" },
        });

    await act(async () => {
        wrapper.find("form").simulate("submit", fakeEvent);
    });

    expect(pwFuncs.checkCurrentPassword).toBeCalled();
    expect(pwFuncs.comparePW).toBeCalled();
    expect(wrapper.find(Alert).length).toEqual(1);
});

Тест пройден, поэтому я не У меня нет проблем с реализацией, но функция act() вызывает у меня проблемы.

Вот ошибка: 

console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:131
Warning: It looks like you're using the wrong act() around your test interactions.
Be sure to use the matching version of act() corresponding to your renderer:

// for react-dom:
import {act} from 'react-dom/test-utils';
// ...
act(() => ...);

// for react-test-renderer:
import TestRenderer from 'react-test-renderer';
const {act} = TestRenderer;
// ...
act(() => ...);
    in ConnectFunction (at ChangePassword.js:191)
    in form (at ChangePassword.js:131)
    in div (at ChangePassword.js:130)
    in section (at ChangePassword.js:125)
    in main (at ChangePassword.js:124)
    in ChangePassword (created by Context.Consumer)
    in withRouter(ChangePassword) (created by ConnectFunction)
    in ConnectFunction (at ChangePassword.test.js:51)
    in Router (created by MemoryRouter)
    in MemoryRouter (at ChangePassword.test.js:50)
    in Provider (at ChangePassword.test.js:49)

Во-первых, в документации Enzyme говорится, что мне даже не нужно заключать свои функции обновления состояния в act(), потому что функция mount делает это автоматически (Я использую React v16.12.0), но без него тестовый набор не запускается, говоря, что требуется act().

From https://github.com/enzymejs/enzyme#reacttestutilsact -wrap

Если вы используете React 16.8+ и .mount (), Enzyme обернет apis, включая .simulate (), .setProps (), .setContext (), .invoke () с ReactTestUtils.act (), поэтому вам не нужно вручную оборачивать его.

и, во-вторых, я пробовал использовать: 

import TestRenderer from 'react-test-rendrer';
const { app } = TestRenderer;

, но он дает точно такую ​​же ошибку.

Я не понимаю, почему появляется ошибка, ведь все тесты все равно проходят. Довольно сложно найти в Интернете какую-либо информацию об ошибках с act(), поэтому, если бы кто-нибудь мог пролить свет на это, это было бы здорово.

1 Ответ

0 голосов
/ 09 мая 2020

Хорошо, значит, в вопросе должно было быть больше информации. Компонент, который я пытаюсь протестировать, заключен в withRouter, поэтому, когда я добавил WrappedComponent ... 

const wrapper = mount(
    <Provider store={reduxStore}>
        <Router>
            <ChangePassword.WrappedComponent {...props} />
        </Router>
    </Provider>
);

... ошибка исчезла, и все тесты теперь проходят нормально. Надеюсь, это кому-то поможет

...