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(
     );        const actual = renderer.getRenderOutput();        const expected = "Like: 5";        expect(actual).toIncludeJSX(expected);    });});