Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 962 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Unit testing a React component using Jasmine and Webpack

4:04 React lesson by

React TestUtils API has changed

This lesson was recorded with an older version of React. With React 0.14, there are some breaking changes you should be aware of:
component
= TestUtils.renderIntoDocument(<Artist name="Run the Jewels" />);
In
any version above 0.13, this code will result in an error. To fix this, you must import the new test module and use the new methods to extract the value out of the DOM:
import
ReactTestUtils from 'react-addons-test-utils';
component = ReactTestUtils.renderIntoDocument( <Artist name="Run the Jewels" /> );
contents = ReactTestUtils.scryRenderedDOMComponentsWithClass(component, 'artist')
Be
aware that contents will return an array of items.

An introduction on unit testing a ReactJS component using Webpack and Jasmine. Learn how to use Webpack to package and import dependencies plus take advantage of the babel-loader to write a simple Jasmine spec using the latest ES6 syntax.

Get the Code Now
click to level up

React TestUtils API has changed

This lesson was recorded with an older version of React. With React 0.14, there are some breaking changes you should be aware of:
component
= TestUtils.renderIntoDocument(<Artist name="Run the Jewels" />);
In
any version above 0.13, this code will result in an error. To fix this, you must import the new test module and use the new methods to extract the value out of the DOM:
import
ReactTestUtils from 'react-addons-test-utils';
component = ReactTestUtils.renderIntoDocument( <Artist name="Run the Jewels" /> );
contents = ReactTestUtils.scryRenderedDOMComponentsWithClass(component, 'artist')
Be
aware that contents will return an array of items.

egghead.io comment guidelines

Avatar
egghead.io

An introduction on unit testing a ReactJS component using Webpack and Jasmine. Learn how to use Webpack to package and import dependencies plus take advantage of the babel-loader to write a simple Jasmine spec using the latest ES6 syntax.

Avatar
Kent C.

FYI, ES6 runs in implicit 'use strict'; mode, so transpilers (like babel) will add 'use strict'; to the output. :-)

Avatar
Simon

Cheers Kent, I've updated the code on Github to reflect this mate, thanks.

In reply to Kent C.
Avatar
dave

Is it possible to do a webpack , jasmine (or Jest) AND a test runner like karma ? This is useful but how would I incorporate tests into a build process , not just run tests ? Hope I make my self clear

In reply to Simon

In this lesson, I'm going to show you how to test the React component using Jasmine. First thing we're going to do is install React using NPM. Once we've installed React, we can then go ahead and create our artist component within the source directory.

The artist component, at the moment, we'll simply render it with div. Once we've created the artist component, we can now create the artist spec, which will test the artist component.

Let's put the artist spec in our test directory and import React from the React add-ons package. Once we've done that, we import our artist component itself.

Next, we need to use the test utilities package, which will then provide us with useful utilities that we can use throughout the spec. With React, our artist component, and our test utilities references in place, we can now create our first describe block.

Within this describe block, we're going to create a variable for a component, which will get recreated within it before reach. We're going to use the test utilities render into document method, which enables us to rerender each and every time so we get a clean and fresh reference of our artist component.

Now, we're going to provide one prop code name with the value of run the joules.

Our first test is simply going to insure that the component renders the correct text, the artist name. To do that, we're going to use an expectation to insure that the component using the get DOM nodes text content, which will return the content within the actual DOM node itself, matches the specific string, which we're going to provide, which is going to be artist name run the joules.

That, now, completes our spec with a simple test. Now, let's go and grab Jasmine. If you go to the Jasmine home page on GitHub, you'll see some nice clear instructions on how to get hold of the source and include it within your HTML file itself.

If you don't fancy downloading all of the files and having them locally, you can go to something like CDNJS and use a CDN to provide the files instead. All you would have to do is step through the HTML syntax and replace it with these URLs. If we go back to our project now, we can create an index.html file within the test directory.

Within there, I have a pretty configured snippet so that I can inject all of that content I've shown you from GitHub, plus the CDN URLs.

The final script tag includes a file called spec.js. This single file will contain all of the JavaScript necessary to run the test and also compile our React component.

This file is created by Webpack. Let's install Webpack using NPM and, at the same time, install the babel-loader. The babel-loader will transpire the ES6 syntax to ES5, but also the JSX syntax to JS. Now, that we've got Webpack installed, we need to configure it.

If you go to the Webpack configuration documentation, you'll notice that there are various options that we can provide either by the CLI or within a JavaScript file itself. We're going to go for the latter. To do that, we need to create a file called webpack.config.js.

I have a sublime snippet, which lays out a Webpack configuration file for me. First, we need to define the entry property with a value point into our test spec. Next, we need to add an output property with values for the directory and the filename of our compiled, bundled codes.

The output public path property is used by the HTML, not the JavaScript file. Finally, at the bottom, I use the babel-loader to process JavaScript files within our project. Now, we can run Webpack.

We need to do this within our node modules.bin directory, because we've installed Webpack locally. Webpack will now go ahead and compile all of our barcodes together into a spec.js file. Now, if we go ahead and open the index.html file in our browser, we'll notice that Jasmine runs, our spec runs, but we've got failure.

The reason for the failure is because we expected an empty string to equal artist name equals run the joules. The artist spec provides the name property. However, the artist component is rendering an empty div. Let's correct that now.

Add a spam element, artist name string, and then complete the rest of the text content using the name property. Once we've completed that, we now need to insure that Webpack is ready to run again, so that we can have a fresh bundle of all of our application codes. If we then go back to the browser and refresh, we'll notice now that the actual spec passes.



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