React Hooks-useReducer（）-集成测试

Question

我已经编写了一个功能组件，该组件使用React.useReducer（）钩子作为代码的一部分。

此组件具有一个减速器及其动作。我认为，与其单独测试reducer的功能和动作，不如将其写为集成测试：

IntegrationTest.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' });
    });
});

[运行测试时，我收到以下错误消息：

无效的挂接呼叫。挂钩只能在功能组件的主体内部调用。可能由于以下原因之一而发生：1.您的React和渲染器版本可能不匹配（例如React DOM）2.您可能违反了《钩子规则》3.您可能在同一应用程序中拥有多个React副本

我如何在这种情况下编写集成测试，因为挂钩只能在组件内调用？

Answer 1

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