React Testing Cookbook
React Testing: Intro to Shallow Rendering
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.
[00:00] I'm going to import React from React, then I'll grab the test utils from the official React add-ons test utils library, and finally I'll import my expect-assertion library from the Expect package. Now let's create a simple component, I'll call it coolComponent, and we will give it a greeting prop, and then we will render out that greeting. So now that we have a component ready, let's create a simple test. I've added a basic describe block and it block, so now we can use the shallow-renderer.
[00:35] The first thing we need to do is create a place to store the shallow-renderer, so I'm going to say renderer, and then use the test utils, and call the createRenderer method. So what's happened here is that our renderer variable has become a temporary place where we can store the output of our component. With the shallow-renderer these components are only rendered one level deep so you don't need a DOM, it just gives you the object structure that you can assert things about.
[01:04] So now we can use this variable and call the render method on it, which works in the same way ReactDOM.render works, so we can pass in coolComponent and give it a greeting prop, and now we can take a look at what this contains by calling the renderer.getRenderOuput method, and let's log that out so we can take a look at it. So now if I run my tests, we can see the object output of our shallow-renderer.
[01:33] We have a type, and key, ref, and props, and more properties on this object here that we can use to write assertions for our tests. As you can see, this object is only one level deep of our rendered output. That makes writing unit tests a lot simpler because we only have to worry about the component, not the environment the component was rendered in.
Hi Uleen,
Thanks! Its actually mostly vanilla Vim; here my minimal .vimrc: https://github.com/trevordmiller/settings/blob/master/dotfiles/.vimrc
I get an error:
- CoolComponent should...: TypeError: Can't add property context, object is not extensible at [object Object].ReactCompositeComponentMixin.mountComponent (node_modules/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 (node_modules/react/lib/ReactTestUtils.js:392:14) at [object Object].ReactShallowRenderer.render (node_modules/react/lib/ReactTestUtils.js:376:8) at Context.<anonymous> (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}) => (
<div> <h1>Greeting</h1> <p>{greeting}</p> </div> );describe('CoolComponent', () => {
it('should...', () => { const renderer = TestUtils.createRenderer(); renderer.render(<CoolComponent greeting='1453853919143' />); const output = renderer.getRenderOutput(); console.log(output); }); });
In React 16...
npm install react-test-renderer --save-dev then... import { createRenderer } from 'react-test-renderer/shallow';
amazing vim customization) can you share your config?