[React Testing] Conditional className with Shallow Rendering

Often our components have output that shows differently depending on the props it is given; in this lesson, we go over how to compare the className prop element tree output based on conditional input.

 

// LikeCounter.js

import React from 'react';
import classnames from 'classnames';

const LikeCounter = ({count, isActive}) => {
    return <a
        className={
            classnames({
                'LikeCounter--active': isActive
            })
        }
        href="#">Like: {count}</a>
}

export default LikeCounter;

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

describe('LikeCOunter', ()=>{

    it('should be a link', ()=>{
        const renderer = TestUtils.createRenderer();
        renderer.render(<LikeCounter count={5} />);
        const actual = renderer.getRenderOutput().type;
        const expected = 'a';
        expect(actual).toEqual(expected);
    });
});

describe('active class', ()=>{
    it('should have active class based on isActive props: true', ()=>{

        const renderer = TestUtils.createRenderer();
        renderer.render(<LikeCounter count={5} isActive={true}/>);
        const actual = renderer.getRenderOutput().props.className.includes('LikeCounter--active');
        const expected = true;
        expect(actual).toEqual(expected);
    });

    it('should have active class based on isActive props: false', ()=>{

        const renderer = TestUtils.createRenderer();
        renderer.render(<LikeCounter count={5} isActive={false}/>);
        const actual = renderer.getRenderOutput().props.className.includes('LikeCounter--active');
        const expected = false;
        expect(actual).toEqual(expected);
    });
});