开玩笑+ react-testing-library:警告更新未包装在act()中 [英] Jest + react-testing-library: Warning update was not wrapped in act()

问题描述

我正在测试我的带有wit-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 */

推荐答案

在该问题可能与以下问题有关，在该问题中，异步逻辑(例如useEffect)正在触发fireEvent之外的状态更改:

The problem may be related to this issue, in which async logic (such as a useEffect) is triggering state changes outside of fireEvent:

https://github.com/kentcdodds/react-testing-library /issues/281

(没有看到您的组件实现，很难确定这是否正是您的情况.)

(Without seeing your component implementation it's hard to be sure if this is exactly what's happening in your case.)

显然，有计划在将来的版本中包括异步处理，这样就不会有问题.

Apparently there are plans to include async handling in a future release, so that this won't be a problem.

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