如何在笑话和酶中为 useState Hook 设置初始状态值？

Question

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

我完全同意Jimmy's Answer从测试文件中模拟 useState 函数，但我有这个问题的一些扩展版本，“如果我有多个 useState 语句进入钩子，我如何测试它们并为它们分配相应的自定义值？”

我有一些带有钩子状态值条件的 JSX 渲染，并且取决于JSX正在渲染的该状态的值。

如何通过将这些 JSX 放入wrapper我的测试用例代码中来测试它们？

Answer 1

根据您链接的答案，您可以为模拟函数的每次调用返回不同的值：

let myMock = jest.fn();

myMock
  .mockReturnValueOnce(10)
  .mockReturnValueOnce('x')
  .mockReturnValue(true);

在我看来，这仍然很脆弱。您可以稍后修改组件并添加另一个状态，并且您会得到令人困惑的结果。

测试 React 组件的另一种方法是像用户一样通过单击内容并设置输入值来测试它。这将触发组件的事件处理程序，React 将像实际配置中一样更新状态。但您可能无法进行浅层渲染，或者您可能需要模拟子组件。

如果您更喜欢浅层渲染，可以从 props 中读取初始状态值，如下所示：

function FooComponent({initialStateValue}) {
  const [state, setState] = useState(initialStateValue ?? []);
}