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.jsimport React from 'react';import classnames from 'classnames';const LikeCounter = ({count, isActive}) => {    return Like: {count}}export default LikeCounter;// LikeCounter.spec.jsimport 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(
     );        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(
     );        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(
     );        const actual = renderer.getRenderOutput().props.className.includes('LikeCounter--active');        const expected = false;        expect(actual).toEqual(expected);    });});