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

Question

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

这是我的测试用例。

 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 */

原文由 iamwtk 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

原文由 Shaphan 发布，翻译遵循 CC BY-SA 4.0 许可协议