redux toolkit testing strategy

gistfile1.txt

counterSlice.js
------------------
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import fakeFetch from './fakeFetch';

export const lazyAdd = createAsyncThunk('counter/lazyAdd',
  async (payload, thunkAPI) => {
    // throw ('error in thunk!')
    const response = await fakeFetch(payload);
    return response;
  }
);

export const initialState = {
  value: 0,
  isLoading: false,
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state, action) => {
      state.value = state.value + 1
    },
    decrement: (state, action) => {
      state.value = state.value - 1
    }
  },
  extraReducers: {
    [lazyAdd.pending]: (state, action) => {
      state.isLoading = true;
    },
    [lazyAdd.rejected]: (state, action) => {
      state.isLoading = false;
      state.error = action.error.message;
    },
    [lazyAdd.fulfilled]: (state, action) => {
      state.isLoading = false;
      state.value = state.value + action.payload;
    }
  }
})

export const {
  increment,
  decrement
} = counterSlice.actions

export default counterSlice.reducer;



/*-----------------------------------------------------*/


counter.test.js
------------------
import createMockStore from '../../test-utils';
import fakeFetch from './fakeFetch';

import counterReducer, {
    initialState,
    increment,
    decrement,
    lazyAdd,
} from './counter';

jest.mock('./fakeFetch');



describe('counterSlice', () => {
    describe('reducers', () => {
        it('returns initial state', () => {
            const nextState = counterReducer(undefined, {});
            expect(nextState).toBe(initialState);
        });

        it('increment', () => {
            const nextState = counterReducer(initialState, increment());
            expect(nextState.value).toBe(1);
        });
        it('decrement', () => {
            const nextState = counterReducer(initialState, decrement());
            expect(nextState.value).toBe(-1);
        });
    });

    describe('extra reducers', () => {
        it('lazyAdd.pending', () => {
            const nextState = counterReducer(initialState, lazyAdd.pending());
            expect(nextState.value).toBe(initialState.value);
            expect(nextState.isLoading).toBe(true);
        });

        it('lazyAdd.fulfilled', () => {
            const mockAsyncPayload = 50;
            const nextState = counterReducer(initialState, lazyAdd.fulfilled(mockAsyncPayload));
            expect(nextState.isLoading).toBe(false);
            expect(nextState.value).toBe(mockAsyncPayload);
        });

        it('lazyAdd.rejected', () => {
            const mockAsyncPayloadError = 'error message';
            const nextState = counterReducer(initialState, lazyAdd.rejected(mockAsyncPayloadError));
            expect(nextState.isLoading).toBe(false);
            expect(nextState.error).toBe(mockAsyncPayloadError);
        });
    });

    describe('lazyAdd', () => {
        it('lazyAdd', async () => {
            const store = createMockStore(initialState);
            const mockPayload = 25;
            const expectedAction = lazyAdd.fulfilled(mockPayload);

            fakeFetch.mockReturnValue(Promise.resolve(mockPayload));

            const thunk = store.dispatch(lazyAdd(10));

            thunk.then(() => {
                const actionsCalled = store.getActions();
                expect(actionsCalled).toContainEqual(expectedAction);
            });
        });
    });
});