使用 renderHook 测试钩子答案

【问题标题】：Testing hooks with renderHook使用 renderHook 测试钩子
【发布时间】：2019-12-22 07:39:55
【问题描述】：

我想测试一个自定义钩子，它被实现为一个帮助函数，以便与其他钩子重用代码。它在其实现中调用useDispatch 和useSelector，并将数据保存在会话存储中：

 export function useCustomHook(key, obj)
  {
    let myObject = {
      somefield: obj.someField
    };
    sessionStorage.setItem(key, JSON.stringify(myObject));
    const dispatch = useDispatch();
    dispatch(actionCreator.addAction(key, myObject));
  }

还有测试：

it('should have data in redux and session storage', () =>
{
  const obj = { 
    somefield: 'my val', 
  };
  renderHook(() => useCustomHook('some key', obj));
  let savedObj= JSON.parse(sessionStorage.getItem('some key'));
  expect(savedObj.someField).toBe('my val');
  renderHook(() => 
  {
    console.log("INSIDE");
    let reduxObj = useSelector(state => state.vals);
    console.log("THE OBJECT: " );
    console.log(reduxObj);
    expect(reduxObj).toBe(2); //just to see if it fails the test - it's not
  });
})

无论我尝试什么，测试只到达“INSIDE”控制台日志，而不打印“THE OBJECT：”控制台日志。测试本身仍然通过，所以就像 useSelector 以某种方式停止了其余的 renderHook 执行。

我猜这与测试没有连接商店的事实有关......在这种情况下可以做些什么来测试redux？

【问题讨论】：

标签： reactjs react-hooks react-hooks-testing-library

【解决方案1】：

您需要提供 a wrapper component 以将 redux Provider 添加到 store 以连接到：

it('should have data in redux and session storage', () =>
{
  const obj = { 
    somefield: 'my val', 
  };

  const store = {} // create/mock a store
  const wrapper = ({ children }) => <Provider store={store}>{children}</Provider>

  renderHook(() => useCustomHook('some key', obj), { wrapper });
  let savedObj= JSON.parse(sessionStorage.getItem('some key'));
  expect(savedObj.someField).toBe('my val');
  renderHook(() => {
    console.log("INSIDE");
    let reduxObj = useSelector(state => state.vals);
    console.log("THE OBJECT: " );
    console.log(reduxObj);
    expect(reduxObj).toBe(2); //just to see if it fails the test - it's not
  }, { wrapper });
})

顺便说一句，renderHook 正在捕获错误，这就是为什么您在测试中看不到它们的原因，如果您尝试访问 result.current 它会抛出，您可能已经看到它在result.error 中表示，但这里不从要断言的自定义挂钩返回值的用法非常不寻常。

在第二个 renderHook 调用中包含断言也可能会导致您出现问题。您可能希望从钩子返回值并在外部断言，或者在 redux 存储中断言更新的值。

【讨论】：