Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
react-enzyme - `shallow` vs `mount` vs `render` lifecycle methods

An exploration of the different render methods available in react-enzyme.

import React from 'react';
function Bar() {
return (
<div>
Hello world,
<span>
we're not testing Bar so this would ideally not executed
through either shallow rendering or Jest's auto mocking.
</span>
</div>
);
}
export default Bar;
import React, { Component } from 'react';
import Bar from './Bar';
class Foo extends Component {
constructor(props) {
console.log('constructor');
super(props);
this.state = {
foo: 'bar'
};
}
componentWillMount() {
console.log('componentWillMount');
}
componentDidMount() {
console.log('componentDidMount');
}
componentWillReceiveProps() {
console.log('componentWillReceiveProps');
}
shouldComponentUpdate() {
console.log('shouldComponentUpdate');
return true;
}
componentWillUpdate() {
console.log('componentWillUpdate');
}
componentDidUpdate() {
console.log('componentDidUpdate');
}
componentWillUnmount() {
console.log('componentWillUnmount');
}
render() {
console.log('render');
return (
<div>
Hello Foo
<Bar foo="bar"></Bar>
</div>
);
}
}
export default Foo;
jest.unmock('./Foo');
import React from 'react';
import { shallow, mount, render } from 'enzyme';
import { renderIntoDocument } from 'react-addons-test-utils';
import Foo from './Foo';
import Bar from './Bar';
// Jest automocking doesn't work right away with stateless components, i.e. you have to force
// them to return a renderable value.
// As it turns out state*full* components only work because of a hack in React:
// https://github.com/facebook/react/blob/6b1232aa86415f0573153888a46c4c5cb38974d8/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js#L1103
Bar.mockImplementation(() => <div className="button" />); // React 0.14
// Bar.mockImplementation(() => null); // React 15
Error.stackTraceLimit = 10;
describe('components/Foo', () => {
describe('rendering methods', () => {
it('Shallow Rendering - shallow', () => {
console.log('Shallow Rendering - shallow');
// constructor
// componentWillMount
// render
// setProps()
// componentWillReceiveProps
// shouldComponentUpdate
// componentWillUpdate
// render
const wrapper = shallow(<Foo />);
console.log('setProps()');
wrapper.setProps({
foo: 'bar'
});
console.log(wrapper.debug());
});
it('Full DOM Rendering - mount', () => {
console.log('Full DOM Rendering - mount');
// constructor
// componentWillMount
// render
// componentDidMount
// setProps()
// componentWillReceiveProps
// shouldComponentUpdate
// componentWillUpdate
// render
// componentDidUpdate
const wrapper = mount(<Foo />);
console.log('setProps()');
wrapper.setProps({
foo: 'bar'
});
const button = wrapper.find(Button);
expect(button.prop('foo')).toBe('bar');
console.log(wrapper.debug());
// const wasIstDas = renderIntoDocument(<Foo />);
// console.log(wasIstDas); // ReactComponentTree?
});
it('Static Rendering API - render', () => {
console.log('Static Rendering API - render');
// constructor
// componentWillMount
// render
const wrapper = render(<Foo />);
console.log(wrapper.html()); // wrapper === Cheerio instance
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.