reactjs - React Hooks - useReducer() - 集成测试

原文 标签 reactjs jestjs react-hooks enzyme

我编写了一个功能组件,它使用 React.useReducer() 钩子(Hook)作为代码的一部分。

这个组件有一个 reducer 和 action 作为它的一部分。我认为与其单独测试 reducer 功能和操作,不如编写一个集成测试:

集成测试.js

describe('integration test for reducers and actions', () => {
    const initialState = { secretWord: 'party' };

    test('dispatch actions and verify updated state', () => {
        const [state, dispatch] = React.useReducer(reducer, initialState);
        dispatch({ type: setSecretWord, payload: 'train' });
        expect(state).toEqual({ secretWord: 'train' });
    });
});

当我运行测试时,我收到以下错误:

无效的 Hook 调用。 Hooks 只能在函数组件的主体内部调用。这可能由于以下原因之一而发生:
1. React 和渲染器的版本可能不匹配(例如 React DOM)
2. 你可能违反了 Hooks 规则
3. 你可能在同一个应用程序中拥有多个 React 副本

在这种情况下如何编写集成测试,因为钩子(Hook)只能在组件中调用?

最佳答案

由于 reducer 是一个普通函数,您可以尝试使用初始状态和有效负载直接调用它,并检查返回的更新状态是否是预期的。

关于reactjs - React Hooks - useReducer() - 集成测试,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60991857/

相关文章:

javascript - React TypeError中的完整日历:无法读取未定义的属性“calendar”

node.js - 使用 jest 和 superagent 进行测试时如何模拟函数

javascript - 为什么使用 Hooks 的 ReactJS 组件会根据开发者控制台是否打开而呈现一次或两次?

reactjs - 如何动态地使用 map 函数来 Hook useState 属性

javascript - 使文本 url 在 div 中可点击

reactjs - 如何在 React Konva 中为舞台或图层设置圆角

jquery - jest 在 jquery 选择器上调用的第三方函数失败

javascript - 我可以依靠 useState 值来计算新状态吗?

javascript - React Redux 未捕获错误 : Expected the reducer to be a function

typescript - 使用 Jest/Typescript 和虚拟函数测试 fs 库函数