The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

React Testing: Intro to Shallow Rendering

React Testing: Intro to Shallow Rendering

1:55
In this lesson, we walk through how to use one of React's Test Utilities (from the `react-addons-test-utils` package) called "Shallow Rendering". This lets us render our React component one level deep - without a DOM - so that we can write tests for it. It works kind of like ReactDOM.render, where the shallow renderer is a temporary place to "hold" your rendered component so that you can assert things about its output. Tests written using the shallow renderer are great for stateless or "dumb" components that simply have their props passed to them from a parent container or "smart" component. These shallow renderer tests work especially well [with stateless function components](https://egghead.io/lessons/react-building-stateless-function-components-new-in-react-0-14). They also work well for "unit" tests where you want to make sure your code works in isolation. _NOTE_: The React team has recommended composing the majority of your apps using these stateless "dumb" components, so the majority of lessons in this course will focus on writing simple unit tests for these stateless components using Shallow Rendering. If you also want to write tests for the stateful components that are tied to different components and state and can't be tested in isolation, you may want to look at using a DOM (with something like Karma or jsdom) and React's other test utilities like renderIntoDocument and Simulate. However, I've found that it is helpful to try to compose most of your project with simple, isolated, stateless or "pure" components that can be unit tested with Shallow Rendering, and then wrap these components with a few stateful or "impure" components that you can either not worry about testing (what I do most of the time because it is difficult to test stateful components), or write separate integration and functional tests for them using different tools.
Watch this lesson now
Avatar
egghead.io

In this lesson, we walk through how to use one of React's Test Utilities (from the react-addons-test-utils package) called "Shallow Rendering". This lets us render our React component one level deep - without a DOM - so that we can write tests for it. It works kind of like ReactDOM.render, where the shallow renderer is a temporary place to "hold" your rendered component so that you can assert things about its output. Tests written using the shallow renderer are great for stateless or "dumb" components that simply have their props passed to them from a parent container or "smart" component. These shallow renderer tests work especially well with stateless function components. They also work well for "unit" tests where you want to make sure your code works in isolation.

_NOTE: The React team has recommended composing the majority of your apps using these stateless "dumb" components, so the majority of lessons in this course will focus on writing simple unit tests for these stateless components using Shallow Rendering. If you also want to write tests for the stateful components that are tied to different components and state and can't be tested in isolation, you may want to look at using a DOM (with something like Karma or jsdom) and React's other test utilities like renderIntoDocument and Simulate. However, I've found that it is helpful to try to compose most of your project with simple, isolated, stateless or "pure" components that can be unit tested with Shallow Rendering, and then wrap these components with a few stateful or "impure" components that you can either not worry about testing (what I do most of the time because it is difficult to test stateful components), or write separate integration and functional tests for them using different tools.

Avatar
Dean

It would be great if we can get at least one more video, in this series, to go over using jsdom (or similiar) and testing a stateful component. It is inevitable that we will need to do this. Granted, I haven't watched the last few vids with Redux, so that might solve my current curiosity of not having a test for a stateful component.

In reply to egghead.io
Avatar
Trevor

Hi Dean,

I agree it would be good to add at least one lesson showing DOM + stateful tests. However, my opinion is that these sorts of tests belong with your functional tests. You can test some state and interactions with shallow rendering as shown in this article: http://simonsmith.io/unit-testing-react-components-without-a-dom/. However, these tests don't really give much value IMO, which is why I didn't include them in this series. In my production apps, I add tests for all "unit" logic for stateless components, then set up non-react specific functional tests for the entire app interactions. In my experience, setting up the environment and tests for interactive and stateful React components (with Mocha + Karma or Jest or whatever) is more work than it is worth. I prefer to have QA handle test automation with functional tests. I might add to this course later with some of these tests, but I feel that the added complexity and bang to buck ratio makes it a lower priority :)

Hope this helps.

In reply to Dean
Avatar
uleen

amazing vim customization) can you share your config?

Avatar
Trevor

Hi Uleen,

Thanks! Its actually mostly vanilla Vim; here my minimal .vimrc: https://github.com/trevordmiller/settings/blob/master/dotfiles/.vimrc

In reply to uleen
Avatar
squirm-life

I get an error:

1) CoolComponent should...:
TypeError: Can't add property context, object is not extensible
at [object Object].ReactCompositeComponentMixin.mountComponent (nodemodules/react/lib/ReactCompositeComponent.js:154:18)
at [object Object].wrapper [as mountComponent] (node_modules/react/lib/ReactPerf.js:70:21)
at [object Object].ReactShallowRenderer.
render (nodemodules/react/lib/ReactTestUtils.js:392:14)
at [object Object].ReactShallowRenderer.render (node
modules/react/lib/ReactTestUtils.js:376:8)
at Context. (src/jsx/lifelock/components/credit/charts/utils/CoolComponent.spec.js:17:14)

import React from 'react';
import TestUtils from 'react-addons-test-utils';
import expect from 'expect';
// import getHistoryDates from './getHistoryDates';

const CoolComponent = ({greeting}) => (

Greeting
{greeting}

);

describe('CoolComponent', () => {

it('should...', () => {
const renderer = TestUtils.createRenderer();
renderer.render();
const output = renderer.getRenderOutput();
console.log(output);
});
});

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?