Testing
Redux boilerplate does not only accumulate in production code, but also in unit tests. To help you reduce it, Preboiled offers two reducer test helpers -
getInitialState and reduceActions - which are described in the following sections.Note that in this guide we assume you use Jest as your testing framework. However, Preboiled doesn't depend on Jest in any way, and it should be easy to translate the examples to your testing framework of choice.
Testing Initial State
When testing reducers, you'll usually want to check if the initial state looks as expected.
1
import reducer from './module'
2
3
test('initial state is 0', () => {
4
const initialState = reducer(undefined, { type: '' })
5
expect(initialState).toBe(0)
6
})
Copied!
getInitialState makes such tests a bit more readable. It simply returns the initial state of a reducer by calling it with an undefined state, just as in the snippet above.1
import { getInitialState } from 'redux-preboiled'
2
import reducer from './module'
3
4
test('initial state is 0', () => {
5
expect(getInitialState(reducer)).toBe(0)
6
})
Copied!
Reducing Multiple Actions
It is often important to test a reducer's state after a sequence of multiple actions were dispatched, rather than just a single one. Loading flags for asynchronous actions are a common example: you'll want to ensure that the flag is set to
true when the initiating action is dispatched, but also that it's set back to false if the corresponding success or failure action is dispatche afterwards.1
import { getInitialState } from 'redux-preboiled'
2
import reducer, { fetchStart, fetchDone } from './module'
3
4
let initialState
5
6
beforeAll(() => {
7
initialState = getInitialState(reducer)
8
})
9
10
describe('on fetchStart', () => {
11
test('loading flag is set', () => {
12
const state = reducer(initialState, fetchStart())
13
expect(state.isFetching).toBe(true)
14
})
15
})
16
17
describe('on fetchDone', () => {
18
test('loading flag is unset', () => {
19
const state1 = reducer(initialState, fetchStart())
20
const state2 = reducer(state1, fetchDone('data'))
21
expect(state2.isFetching).toBe(false)
22
})
23
})
Copied!
To make tests like these easier to write, Redux Preboiled offers the
reduceActions helper. It takes a reducer and a sequence of actions, and returns the state after all actions have been processed. It also automatically gets the reducer's initial state and passes it together with the first action in the sequence.1
import {
2
chainReducers,
3
createAction,
4
onAction,
5
reduceActions,
6
withInitialState
7
} from 'redux-preboiled'
8
9
const increment = createAction('increment')
10
11
const counterReducer = chainReducers(
12
withInitialState(0),
13
onAction(increment, state => state + 1)
14
)
15
16
reduceActions(counterReducer, increment())
17
// => 1
18
19
reduceActions(counterReducer, increment(), increment())
20
// => 2
Copied!
Using this helper, we can condense the tests above to:
1
import { reduceActions } from 'redux-preboiled'
2
import reducer, { fetchStart, fetchDone } from './module'
3
4
describe('on fetchStart', () => {
5
test('loading flag is set', () => {
6
const state = reduceActions(reducer, fetchStart())
7
expect(state.isFetching).toBe(true)
8
})
9
})
10
11
describe('on fetchDone', () => {
12
test('loading flag is unset', () => {
13
const state = reduceActions(reducer, fetchStart(), fetchDone('data'))
14
expect(state.isFetching).toBe(false)
15
})
16
})
Copied!
If you want to start the reduction from a specific starting state, you can use the
reduceActionsFrom helper instead.1
reduceActionsFrom(0, counterReducer, increment())
2
// => 1
3
4
reduceActionsFrom(3, counterReducer, increment(), increment())
5
// => 5
Copied!
Next Steps
The current set of testing helpers is still very small. If there are any other helpers you'd like to see, feel free to file an issue.
This guide concludes our tour through Redux Preboiled. For more examples, looking at the repository's examples directory. Reference documentation on all helpers can be found in the API section.
Last modified 7mo ago
Copy link