[React Testing] Element types with Shallow Rendering

When you render a component with the Shallow Renderer, you have access to the underlying object. We can write lots of useful tests to check that our components are working as expected. In this lesson, we will use the type property on the shallow rendered component to make sure that the root element is what we expect it to be.

LikeCounter.js

import React from 'react';

const LikeCounter = ({count}) => {
    return <a 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);
    });
});