如何使用钩子在 React js 中调用或不调用 setState 函数？

Question

我正在尝试测试custom hook。我想知道setState 函数是否触发。 这是我的自定义钩子

import React from "react";
import axios from "axios";
export default () => {
  const [state, setState] = React.useState([]);

  const fetchData = async () => {
    const res = await axios.get("https://5os4e.csb.app/data.json");
    setState(res.data);
  };

  React.useEffect(() => {
    (async () => {
      await fetchData();
    })();
  }, []);

  return { state };
};

现在我正在尝试测试这个custom 钩子。我想知道setState函数是否触发。

我试过这样

import moxios from "moxios";
import React from "react";
import { act, renderHook, cleanup } from "@testing-library/react-hooks";

import useTabData from "./useTabData";
describe("use tab data", () => {
  beforeEach(() => {
    moxios.install();
  });
  afterEach(() => {
    moxios.uninstall();
  });

  describe("non-error response", () => {
    // create mocks for callback arg
    const data = [
      {
        name: "hello"
      }
    ];
    let mockSetCurrentGuess = jest.fn();
    beforeEach(async () => {
      moxios.wait(() => {
        const request = moxios.requests.mostRecent();
        request.respondWith({
          status: 200,
          response: data
        });
      });
    });

    test("calls setState with data", async () => {
      React.useState = jest.fn(() => ["", mockSetCurrentGuess]);
      const { result, waitForNextUpdate } = renderHook(() => useTabData());
      console.log(result);
      //expect(mockSetCurrentGuess).toHaveBeenCalledWith(data);
    });
  });
});

Answer 1

你不应该嘲笑 React 内部。这是不正确的。无论哪种方式，由于闭包，此代码在模拟中无效。即使它有效，如果你在模拟真正的实现，测试也没有意义，不是吗？ :)

我建议您尝试了解 react 钩子在您的代码中的作用。

您的自定义钩子中有一个状态：

const [state, setState] = React.useState([]);
.
.

return [state]; //you are returning the state as ARRAY

@testing-library/react-hooks 允许您调试并获取钩子当前结果的值。

const { result, waitForNextUpdate } = renderHook(() => useTabData());
const [foo] = result.current; // the array you returned in hook
expect(foo).toEqual('bar'); //example assertion

我会在这里停下来，让您学习和调试。