Jest + react-testing-library:警告更新未包含在 act() 中

问题描述

我正在用 react-testing-library 测试我的组件，并且测试运行良好.我只是无法摆脱这个警告，fireEvent 应该被包装在开箱即用的行为中，但我试图再次包装它，但它没有帮助.

I am testing my component wit react-testing-library and test works well. I just can't get rid of this warning, fireEvent should by wrapped in act out-of-the-box, but I tried to wrap it again and it did'nt help.

这是我的测试用例.

it.only("should start file upload if file is added to the field", async () => {
    jest.useFakeTimers();
    const { getByTestId } = wrapper;
    const file = new File(["filefilefile"], "videoFile.mxf");

    const fileInput = getByTestId("drop-zone").querySelector(
      "input[type='file']"
    );

    fireEvent.change(fileInput, { target: { files: [file] } });

    act(() => {
      jest.runAllTimers();
    });

    await wait(() => {
      expect(
        initialProps.uploadItemVideoFileConnect.calledWith(file, 123)
      ).toBe(true);
    });
  });

这里是警告

Warning: An update to UploadButtonGridComponent inside a test was not wrapped in act(...).

    When testing, code that causes React state updates should be wrapped into act(...):

    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */

推荐答案

该问题是由 Component 内部的许多更新引起的.

That issue is caused by many updates inside Component.

我也是这样，这就是我解决问题的方法.

I got the same, this is how I solved the issue.

await act( async () => {
 fireEvent.change(fileInput, { target: { files: [file] } });
});

这篇关于Jest + react-testing-library:警告更新未包含在 act() 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！