使用 jest 和 enzyme 的 useReducer hook 的单元测试

Question

我有如下代码：

export default function func() {
  const [state, setState] = useReducer(
   (state, newState) => ({...state, ...newState}),
   {loading: false, name: ""}
  );

  if(state.loading) {
    return <Loader />
  }
  return (
    <div>{state.name}</div>  
  );
}

我一直在 google 中搜索这个，但没有找到预期的结果。那么为此组件编写单元测试的最佳方法是什么？

提前致谢

Answer 1

最好的方法是将 reducer 提取到一个单独的可测试函数中，如下所示：

export default function func() {
  const [state, setState] = useReducer(reducer, {
    loading: false,
    name: ""
  });

  if (state.loading) {
    return <Loader />;
  }
  return (
    <div>{ state.name }</div>
  );
}

export const reducer = (state, newState) => ({
  ...state,
  ...newState,
})

此外，在使用缩减器模式时，您的第二个参数通常是描述特定操作的“动作”。 Here's an article describing this pattern in depth.

使用 jest 和 enzyme 的 useReducer hook 的单元测试

Unit test for useReducer hook with jest and enzyme

unit-testing

reactjs

jestjs

enzyme

react-hooks