THEORY
This theory is basically a copy from Reference 1 and Reference 2, but I want to copy it here in case it gets deleted.
Shallow
Real unit test (isolation, no children render)
Simple shallow
Calls:
- constructor
- render
Shallow + setProps
Calls:
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- render
Shallow + unmount
Calls:
- componentWillUnmount
Mount
The only way to test componentDidMount and componentDidUpdate. Full rendering including child components. Requires a DOM (jsdom, domino). More constly in execution time. If react is included before JSDOM, it can require some tricks:
require(‘fbjs/lib/ExecutionEnvironment’).canUseDOM = true;
Simple mount
Calls:
- constructor
- render
- componentDidMount
Mount + setProps
Calls:
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
Mount + unmount
Calls:
- componentWillUnmount
Render
only calls render but renders all children.
CONCLUSION
- Always begin with shallow
- If componentDidMount or componentDidUpdate should be tested, use mount
- If you want to test component lifecycle and children behavior, use mount
- If you want to test children rendering with less overhead than mount and you are not interested in lifecycle methods, use render
Be First to Comment