使用 useState 对内部状态进行 React Hook 测试

Question

我一直在研究大量资源以使用带有 React Hook 的 useState 来测试内部状态，但仍然找不到满意的答案，一些测试用例正在从 mount 或 shallow 获取预期值，这将显示在 UI 端而不是从组件的内部状态（useState）显示，如果组件没有在 UI 端暴露状态值怎么办，例如：

const TestComponent = () => {
  const [count, setCount] = React.useState(0);

  return (
    <span>
      <button id="count-up" type="button" onClick={() => setCount(count + 1)}>Count Up</button>
    </span>
  );
}

如何编写测试用例进行测试

1) 当组件挂载时，我的内部状态count会被初始化为0？

2) 当组件在按钮count-up 上模拟onClick 事件时，应该调用我的setCount 并且我的内部状态count 应该变为1？

Answer 1

你可以在 React 上使用jest.spyOn 来查看组件是否调用了setState 钩子，一个简单的测试示例：

import React from "react";
import App from "./app";
import Enzyme, { shallow } from "enzyme";
import Adapter from "enzyme-adapter-react-16";

Enzyme.configure({ adapter: new Adapter() });

describe("App", () => {
  it("should call setState with initial values on component mount", () => {
    const mockSetState = jest.spyOn(React, "useState");

    shallow(<App />);

    expect(mockSetState).toHaveBeenCalledTimes(1);
    expect(mockSetState).toHaveBeenCalledWith(5);
  });
});

您也可以将useState 移动到单独的文件中，并将其用作自定义挂钩（可能是不必要的层，由您决定）

// useCounter.js
import { useState, useCallback } from "react";

const useCounter = initialValue => {
  const [count, setValue] = useState(initialValue);
  const setCount = useCallback(x => setValue(x), []);
  return { count, setCount };
};

export default useCounter;

// usage: app.js
function App() {
  const { count, setCount } = useCounter(5);
  return (
    <div className="App">
      <h1>Testing React Hooks</h1>
      <p>{count}</p>
      <button onClick={() => setCount(count - 1)}>-</button>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

然后您可以对“自定义”挂钩进行测试：

import { renderHook, act } from "@testing-library/react-hooks";
import useCounter from "./useCounter";

test("should increment counter", () => {
  const { result } = renderHook(() => useCounter(0));

  act(() => {
    result.current.setCount(1);
  });

  expect(result.current.count).toEqual(1);
});

代码沙盒上的工作示例