React Hooks - useReducer() - Integration Test

user_1060026 0
Viewed 1794

I have written a functional component, which uses React.useReducer() hook as part of the code.

This component has a reducer and actions as part of it. I thought rather than testing reducer function and actions individually, I will write an integration test as:

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

When I run the test, I received error as:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app

How do I write integration tests in this scenario as hook can only called within a component only?

react-hooks enzyme jestjs reactjs
2 Answers

Since the reducer is a plain function you could try directly invoking it with your initial state and a payload, and check if the returned updated state is the expected.

user_22463750

Try updating the code as below - using renderHook

import { renderHook } from '@testing-library/react-hooks';

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

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