小编Jon*_*man的帖子

为什么我在测试此钩子时会看到有关使用 act 的警告?

当使用“@testing-library/react-hooks”中的 renderHook 时,我无法理解如何在没有以下警告的情况下为钩子编写测试。

“警告:测试中对 TestHook 的更新未包含在 act(...) 中。”

基本上,挂钩在状态中设置初始值useState,然后在useEffect挂钩内我异步执行一些操作,最终更新状态值。

import React from "react";

// fake request
const fetchData = () => Promise.resolve("data");

export const useGetData = () => {
  const initialData = { state: "loading" };
  const [data, setData] = React.useState(initialData);

  React.useEffect(() => {
    fetchData()
      .then(() => setData({ state: "loaded" }));
  }, []);

  return data;
};
Run Code Online (Sandbox Code Playgroud)

钩子总是简单地返回状态值..所以我编写了一个测试来断言它首先返回初始值并最终返回新的状态值。

import { renderHook } from "@testing-library/react-hooks";
import { useGetData } from "./useGetData";

describe("useGetData", async () => {
  it('Should initially …
Run Code Online (Sandbox Code Playgroud)

reactjs jestjs react-hooks-testing-library

5
推荐指数
1
解决办法
2259
查看次数