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.
[00:00] 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.
[00:13] 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.
[00:23] 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.
[00:33] 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.
[00:47] 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.
[01:02] Now, we're going to provide one prop code name with the value of run the joules.
[01:06] 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.
[01:28] 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.
[01:42] 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.
[02:01] 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.
[02:19] 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.
[02:50] 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.
[03:14] 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.
[03:32] 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.
[03:45] 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.
FYI, ES6 runs in implicit 'use strict'; mode, so transpilers (like
babel) will add
'use strict'; to the output. :-)
Cheers Kent, I've updated the code on Github to reflect this mate, thanks.
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