Testing React and Redux - Tuong-Nguyen/JavaScript-Structure GitHub Wiki
Planning
Test Framework
-
Jest This is a preferred way.
-
Mocha + Expect
npm install mocha expect --save-dev
Where
In-memory DOM via JSDOM
npm install jsdom --save-dev
Helper
Enzyme
npm install enzyme --save-dev
React Testing
What
Presentation component
Rendering Options
| Shallow Render | Render into Document |
|---|---|
| Fast | Slower |
| Test in isolation | Test set of components |
| No refs or interactions yet | Test refs and interactions |
| Recommended for the future |
- Different UIs with
propsvalues: Using StoryBook - StoryShot will generate Snapshot tests for those stories. - Interaction -
props's handler are called with correct arguments when user interacts to the component (ie: user clicks on Submit, ...).
Redux Testing
What?
Container component
How to test Container component
- Markup
- Behavior
Action Creators
Action creator is just a function, we can unit test as a ordinary function with expect
Reducers
- Generate reducer tests with Redux Test Recorder
- Create reducer tests manually - Reducers are pure function so testing them are quite easy.
Steps:
- Arrange initial state and data
const initialState = [{title: 'A'}, {title:'B'}];
const newCourse = {title:'C'};
- Arrange action
const action = actions.createCourseSuccess(newCourse);
- Execute the reducer
const newState = courseReducer(initialState, action);
- Assert the new state
expect(newState.length).toBe(3);