[React Testing] className with Shallow Rendering

The React Shallow Renderer test utility lets us inspect the output of a component one level deep. In this lesson, we will examine the rendered output of props, specifically the className prop. We will then use the ES2015 String.includes() method to check that our rendered className includes what we expect.

 

//className,js
import React from 'react';

const IconComponent = ({icon}) => {
    return (
        <a className={`fa ${icon}`} rel="icon"/>
    )
};

export default IconComponent;

//className.spec.js
import React from 'react';
import expect from 'expect';
import expectJSX from 'expect-jsx';
import TestUtils from 'react-addons-test-utils';
import IconComponent from './className';

describe('LikeCOunter', ()=>{

    it('should have facebook icon', ()=>{

        const renderer = TestUtils.createRenderer();
        renderer.render(<IconComponent icon="facebook"/>);
        const actual = renderer.getRenderOutput().props.className.includes('facebook');
        console.log(renderer.getRenderOutput());
        const expected = true;
        expect(actual).toEqual(expected);
    });
});