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

Question

我编写了一个功能组件，它使用 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)只能在组件中调用？

Answer 1

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