Testing React using Enzyme
Blog post on why and how to use Enzyme
My slides: slides.com/rkotze
What is Enzyme?
It’s a testing utility to assert, manipulate and read rendered React components
Made by Airbnb
Why use it?
- Keeps the code base clean and reduced boiler code
- Stable rendering of components
- Easy to use API to assert on rendered components
Lets see it in action ...
Before Enzyme
describe('User profile', () => {
let component, dom;
before((done) => {
let person = { FirstName:'Richard', LastName:'Kotze' };
component = ReactDOM.render(
<ProfileBox person={person} />,
document.getElementById('container'),
() => {
setTimeout(done);
}
);
});
after((done) => {
React.unmountComponentAtNode(document.getElementById('container'));
setTimeout(done);
});
it('should contain name', () => {
dom = React.findDOMNode(component);
dom.textContent.should.containEql('Richard Kotze');
});
});
Using Enzyme
import { mount } from 'enzyme';
describe('User profile', () => {
const person = { FirstName:'Richard', LastName:'Kotze' };
it('should contain name', () => {
const profileDom = mount(<ProfileBox person={person} />);
profileDom.text().should.containEql('Richard Kotze');
});
});
Enzyme API
Enzyme provides three ways to render your components.
shallow(<Component />)
Testing the component as a unit and not asserting on child components
Browser environment not needed e.g. jsdom
Enzyme API
mount(<Component />)
Full DOM rendering when interacting with DOM API or components that use lifecycle methods.
Browser environment needed e.g. jsdom
Enzyme API
render(<Component />)
Render React components to static HTML and analyse the HTML stucture using the Cheerio library.
Browser environment not needed e.g. jsdom
Enzyme examples
Commonly used methods to help you kick start your React JS testing.
.find(['css selector'])
const dom = shallow(<ExampleComponent />);
const exampleList = dom.find('.exampleList li');
exampleList.length.should.equal(3);
If a component contained a list we can use the find method to get the list items and assert the total.
Find() returns a wrapper which will contain an array of elements.
.find(['other selector'])
Other selectors to find elements
Component constructor
.find(ExampleComponent);
Component displayName
.find('ExampleComponent');
Object property selector
.find({ magic: 'foo' });
<span magic="foo" />
.get(index) and .at(index)
const dom = shallow(<ExampleComponent />);
const exampleList = dom.find('.exampleList li');
exampleList.get(0).getAttribute('class').should.equal('special');
exampleList.at(1).contains(<li>test</li>).should.be.true();
- Get() returns a node (ReactElement) giving access to React and DOM methods.
- At() returns a wrapper to access Enzyme methods
Get a single element from list
.debug()
const dom = shallow(<ExampleComponent />);
const exampleList = dom.find('.exampleList li');
dom.debug();
See a string result of rendered mark up.
Useful if your test are failing for an unexpected reason.
Questions?
Blog post on why and how to use Enzyme
slides.com/rkotze/testing-react-using-enzyme
slides.com/jondarrer/a-simple-node-js-server
By Jonathan Darrer
Testing react using Enzyme
By Richard Kotze
Testing react using Enzyme
- 1,600