Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save rememberlenny/c0f7c3c87d25583aa9334cebc23a2c56 to your computer and use it in GitHub Desktop.
Save rememberlenny/c0f7c3c87d25583aa9334cebc23a2c56 to your computer and use it in GitHub Desktop.
redux toolkit testing strategy
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);
});
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment