Unit testing a React component using Jasmine and Webpack

[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:09] 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.

[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:34] 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.

[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:04] 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.

[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.