时间戳

首页 > 解决方案 > 使用 useDispatch 和 useSelector 反应 Hook 测试

reactjs - 使用 useDispatch 和 useSelector 反应 Hook 测试

问题描述

React Hook 已经发布了一段时间，但我仍然找不到测试useSelector()和useDispatch()钩子的标准测试方法，例如，我有一个简单的组件

const TestComponent = () => {
  const currentUserId = useSelector(state => {
    return state.userId;
  });
  const currentUserName = useSelector(state => {
    return state.userName;
  });
  const dispatch = useDispatch();
  const updateUsername = (id, name) => { dispatch(updateUsername(id, name)) };

  return (
     <span>
      <UserForm userId={currentUserId} userName={currentUserName} onChange={() => {updateUsername}} />
    </span>
  )
}

我如何编写测试用例useSelector()并且useDispatch()我想验证：

1）当我用一些模拟状态初始化反应钩子组件时，我currentUserId的组件内部将与模拟的“state.userId”相同？

2）当我在组件上模拟onChange事件时UserForm，我dispatch(updateUsername(id, name))应该被调用一次吗？随着我state.name的模型更新用户名的更新？

标签： reactjsreact-reduxreact-hooksenzyme

解决方案

推荐阅读