Libraries

• Mocha
• Expect
• Enzyme

What to test

• Markup
• Behavior

Steps

Export unconnected component

• Container component has 2 parts: unconnected component and default exported connect
• Need export the unconnected component to test

export class ManageCoursePage extends React.Component {}

Mount the unconnected component

• mount: A method that re-mounts the component. This can be used to simulate a component going through an unmount/mount lifecycle.
• Ref: http://airbnb.io/enzyme/docs/api/mount.html

const wrapper = mount(<ManageCoursePage {...props}/>);

Use React wrapper

Find the element

• find(selector)
• Selector in enzyme is similar to a CSS selector. http://airbnb.io/enzyme/GLOSSARY.html#selector

const saveButton = wrapper.find('input').last();

Simulate an action

.simulate(event[, mock]): returns itself, ReactWrapper

• event: the event name to be simulated
• mock: a mock event object that will be merged with the event object passed to the handlers.

saveButton.simulate('click');

Expect for assertion

• Ref: https://github.com/mjackson/expect

expect(wrapper.state().errors.title).toBe('Title must be at least 5 characters');