A first look: the Low Level Approach

Let’s start with a low level approach by using the React specific Test Utils. Test Utils enables a concept called shallow rendering, which simply means rendering a component one level deep, neglecting any child components.

import TestUtils from 'react-addons-test-utils';

const renderer = TestUtils.createRenderer();

function shallow(Component, props) {
    renderer.render(<Component {...props} />);
    return renderer.getRenderOutput();
}

By implementing our own shallow function, we can simply call shallowRenderer internally and return a shallow rendered component.

Now we can simply test a Bar component for example.

const Bar = React.createClass({
    render() {
        return (
            <div className="bar">{this.props.title}</div>
        )
    }
});

Here’s our very first test, we want to make sure that the title passed in via props is being rendered.

describe('low level testing a React Application', () => {
    it
 
('should shallow render', () => {
        const bar = shallow(Bar, {title: 'fooBar'});
        expect(bar.type).toBe('div');
        expect(bar.props.className).toBe('bar');
        expect(bar.props.children).toBe('fooBar');
    });
});

Shallow rendering doesn’t rely on any DOM, it returns a React Element one level deep meaning calling shallow(Bar, {title: ‘fooBar’}) will return an object.

{
  $$typeof: ..., 
  type: 'div', 
  key: null, 
  ref: null, 
  props: {className: 'bar', children: 'bar'}, 
  ...
}

This also explains why we can assert bar.props.ClassName to be ‘fooBar’ for example.

Why shallow rendering? This approach has a couple of advantages but also a couple of drawbacks, obviously. One advantage is not having to deal with a real DOM, meaning no side effects. Further more, we can isolate the component quite comfortably, without having to depend on other components to function properly. The disadvantages include not being able to simulate clicks with Simulate (which we will get to later on) and no access to refs (references). There are workarounds to these limitations, but that also means a lot of extra work to implement in cases where we need to access references.