With new frameworks comes new ways of testing things. With Angular 1.x there were tools such as angular-mocks that were designed to try and make your life easier and test your components and directives efficiently and effectively. For unit testing any front end ui code the ideal scenario would be to only render that specific component, but still be able to test that the correct properties are being passed onto any children components. The inner workings, rendering, etc. of those children components are not the concern of the parent. The true unit test concern is making sure that all needs of the children are being through the exposed properties. Any actual rendering of multiple components and interaction is outside the scope of an actual unit and falls into a different category of testing. This is something that the angular-mocks framework failed to do properly and is one of the major reasons we ended up abandoning use of it.
For react there is an amazing tool called enzyme. My favorite feature is that you can test the component without rendering the children components! It is called shallow rendering. I'll walk through some quick samples of why this is great and how you use it.
So to get started, let's use the CustomList object that I had in my previous post. Here is a link to the fiddle. The code for the CustomList is as follows, and add a click function for each template to test a function.
So what do we want to test here? One obvious thing is to make sure that there is an item row for each item passed into the list template. So for each item passed in there should be an item for each one.
A simple test using jasmine might look like this:
For react there is an amazing tool called enzyme. My favorite feature is that you can test the component without rendering the children components! It is called shallow rendering. I'll walk through some quick samples of why this is great and how you use it.
class CustomList extends React.Component {
render() {
const ItemTemplate = this.props.itemTemplate || DefaultRow;
return (
<ul className="list-container">
{this.props.items.map((item) => <ItemTemplate item={item} onClick={() => this.props.onRowClick(item)} />)}
</ul>
);
}
}
So what do we want to test here? One obvious thing is to make sure that there is an item row for each item passed into the list template. So for each item passed in there should be an item for each one.
A simple test using jasmine might look like this:
it('should have an item template for each item', () => {
const items = [ {id: 'id1'}, {id: 'id2'}, {id: 'id3'} ];
const onRowSelect = jasmine.createSpy('onRowSelect');
const component = shallow(<CustomList items={items} onRowSelect={onRowSelect} />);
expect(component.find(ItemTemplate).length).toBe(3);
});
To break it down we are creating a shallow rendering of the component using JSX and pass in whatever properties that we might have if we were using with another component.
Now we want to test the properties of a component. So let's use the same example and say each ItemTemplate should have an appropriate item.
it('should have a corresponding item property on each ItemTemplate', () => {
const items = [ {id: 'id1'}, {id: 'id2'}, {id: 'id3'} ];
const onRowSelect = jasmine.createSpy('onRowSelect');
const component = shallow(<CustomList items={items} onRowSelect={onRowSelect} />);
component.find(ItemTemplate).forEach( (itemTemplate, index) => {
expect(itemTemplate.prop('item')).toBe(items[index]);
});
});
Now that we have that, we might want to test the click events of each one and make sure they are correct. For that we can 'simulate' a DOM event that would cause the onClick event to be fired.
it('should fire an onClick event for each row with the appropriate item' , () => {
const items = [ {id: 'id1'}, {id: 'id2'}, {id: 'id3'} ];
const onRowSelect = jasmine.createSpy('onRowSelect');
const component = shallow(<CustomList items={items} onRowSelect={onRowSelect} />);
component.find(ItemTemplate).forEach( (itemTemplate, index) => {
itemTemplate.simulate('click');
expect(onRowSelect).toHaveBeenCalledWith(items[index]);
});
});
And there you have some simple tests using shallow rendering.
Cheers!
