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

utugiqy6 于 2023-10-14 发布在 Jest

关注(0)|答案(4)|浏览(140)

我正在测试我的组件witreact-testing-library和测试工作良好。我只是不能摆脱这个警告，火灾事件应该 Package 在行为开箱即用，但我试图 Package 它一次，它没有帮助。
这是我的测试案例。

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

jestjs

来源：https://stackoverflow.com/questions/55181009/jest-react-testing-library-warning-update-was-not-wrapped-in-act

4条答案

按热度按时间

gzszwxb41#

该问题是由组件内部的许多更新引起的。
我得到了同样的，这就是我如何解决这个问题。

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

赞(0）回复(0）举报 2023-10-14

2mbi3lxu2#

在源代码中，fireEvent已经 Package 在act()中。
该问题可能与此问题有关，其中BRAC逻辑（例如useEffect）在fireEvent之外触发状态更改：
https://github.com/kentcdodds/react-testing-library/issues/281
（在没有看到组件实现的情况下，很难确定这是否正是在您的案例中发生的情况。
显然，有计划在未来的版本中包括DNC处理，所以这不会是一个问题。

赞(0）回复(0）举报 2023-10-14

cgh8pdjw3#

所以这很难总结，但我会尝试。
act警告只是告诉你，在你的功能组件中发生了一些你没有测试的事情。
假设我们要呈现一个todos列表，

<ul>
      {loading ? (
        <p>Fetching todos</p>
      ) : (
        <>
          {appData.todoList.slice(0, 15).map((item) => {
            const { id, title } = item;
            return (
              <li key={id} data-testid={id}>
                <Link to={`/item/${id}`}>{title}</Link>
              </li>
            );
          })}
        </>
      )}
    </ul>

下面的测试用例将抛出act警告

import { waitFor, screen, waitForElementToBeRemoved } from "@testing-library/react";

it("Renders <TodoList /> component", async () => {
    render(<TodoList />);
    await waitFor(() => expect(axios.get).toHaveBeenCalledTimes(1));
    await waitForElementToBeRemoved(() => screen.getByText(/Fetching todos/i));

    expect(axios.get).toHaveBeenCalledTimes(1);
    todos.slice(0, 15).forEach((td) => {
      expect(screen.getByText(td.title)).toBeInTheDocument();
    });
  });

但是如果你像这样重新排列await行，

await waitForElementToBeRemoved(() => screen.getByText(/Fetching todos/i));
await waitFor(() => expect(axios.get).toHaveBeenCalledTimes(1));

act警告消失。这就说得通了你要确保你的用户不再看到加载指示器。
还有其他情况下，所以继续阅读这篇文章从肯特多兹。
https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning

赞(0）回复(0）举报 2023-10-14

2j4z5cfb4#

@jaredsk的简短版本回答：

await act(() => fireEvent.submit(form));

由于在返回Promise时不必定义BRAC

赞(0）回复(0）举报 2023-10-14

我来回答

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

4条答案

相关问题

热门标签

最新问答