Let’s talk about testing
View Slide
Which types of testing are there?
Unit Testing
Unit
FunctionComponentsActionsReducers
Why should you test?
Catch some bugs before theyhappen
Executable Documentation
Write Better Code
// add.jsexport function add(x, y) {return x + y;}
// add.test.jsimport { add } from './add.js';describe('add()', () => {it('adds two numbers', () => {expect(add(2, 3)).toEqual(5);});it('doesnt add the third number', () => {expect(add(2, 3, 5)).toEqual(add(2, 3));});});
Max Stoiber – @mxstbr – mxstbr.com
// add.jsexport function add(x, y) {return x + y; x * y;}
Redux
NavBar!"" NavBar.react.js # React component#!"" NavBar.actions.js # Actions!"" NavBar.constants.js # Constants!"" NavBar.reducer.js # Reducer#!"" NavBar.actions.test.js # Actions tests$"" NavBar.reducer.test.js # Reducer tests
Actions
// NavBar.actions.jsexport function toggleNav() {return { type: "TOGGLE_NAV" };}
// NavBar.actions.test.jsimport { toggleNav } from './NavBar.actions';describe('NavBar actions', () => {});
describe('NavBar actions', () => {describe('toggleNav', () => {it('should return the correct constant', () => {expect(toggleNav()).toEqual({type: "TOGGLE_NAV"});});});});
describe('NavBar actions', () => {describe('toggleNav', () => {it('should return the correct constant', () => {expect(toggleNav()).toEqual({type: "TOGGLE_NAV"});});});});export function toggleNav() {return { type: "TOGGLE_NAV" };}
Reducers
// NavBar.reducer.jsconst initialState = {open: false};export default function NavBarReducer(state = initialState, action) {switch (action.type) {case "TOGGLE_NAV":return {…state,open: !state.open};default:return state;}}
// NavBar.reducer.jsconst initialState = {open: false};export default function NavBarReducer(state, action) {switch (action.type) {case "TOGGLE_NAV":return Object.assign({}, state, {open: !state.open});default:return state;}}
describe('NavBarReducer', () => {it('returns the initial state', () => {expect(NavBarReducer(undefined, {})).toEqual({open: false});});it('handles the toggleNav action', () => {expect(NavBarReducer(undefined, toggleNav())).toEqual({open: true});});});
Why Jest?
1. Performance2. Snapshot Testing3. Constant improvements
Components
const Button = (props) => (className="btn"onClick={props.onClick}>{props.children});
Jest Snapshot Testing
// Button.test.jsimport React from 'react';import renderer from 'react-test-renderer';import Button from './Button.react';describe('', () => {it('should render a button with a classname', () => {});it('should attach an onclick handler passed in', () => {});it('should render its children', () => {});});
// Button.test.jsimport React from 'react';import renderer from 'react-test-renderer';import Button from './Button.react';describe('', () => {it('should render a button with a classname', () => {});it('should attach an onclick handler passed in', () => {});it('should render its children', () => {});});const Button = (props) => (className="btn"onClick={props.onClick}>{props.children});
// Button.test.jsdescribe('', () => {it('should render a button with a classname', () => {const tree = renderer.create().toJSON();expect(tree).toMatchSnapshot();});it('should attach an onclick handler passed in', () => {});it('should render its children', () => {});});
// Button.test.js.snapexports[` should render a button with a classname 1`] = `className="btn"onClick={undefined} />`;
// Button.test.jsdescribe('', () => {it('should render a button with a classname', () => {});it('should attach an onclick handler passed in', () => {const tree = renderer.create( {}}>).toJSON();expect(tree).toMatchSnapshot();});it('should render its children', () => {});});
exports[` should attach an onclick handler passed in 1`] = `className="btn"onClick={[Function]} />`;
// Button.test.jsdescribe('', () => {it('should render a button with a classname', () => {});it('should attach an onclick handler passed in', () => {});it('should render its children', () => {const tree = renderer.create(Some text).toJSON();expect(tree).toMatchSnapshot();});});
exports[` should render its children 1`] = `className="btn"onClick={undefined}>Some text`;
Quickest Testing Ever
Coverage
Let’s do some testing!git checkout 6-testingnpm installnpm run test