[React Testing] Children with Shallow Rendering

When testing React components, we often want to make sure the rendered output of the component matches what we expect. With the React Shallow Renderer, we can check the entire rendered output of a component, the children prop, or a subset of the children prop. We can also use 3rd party libraries to check that this element tree includes a specific piece. In this lesson we will walk through examples of each.

 

import React from 'react';
import expect from 'expect';
import expectJSX from 'expect-jsx';
expect.extend(expectJSX);
import TestUtils from 'react-addons-test-utils';
import LikeCounter from './likeCounter';


describe('like counter', ()=>{

    it('should render the like count correctly', ()=>{
        const renderer = TestUtils.createRenderer();
        renderer.render(<LikeCounter count={5} />);
        const actual = renderer.getRenderOutput();
        const expected = "Like: 5";
        expect(actual).toIncludeJSX(expected);
    });
});