Chapter 8. Testing React Components

Until now, we have explored React's components lifecycle, properties, state, validations, and ECMAScript with respect to React 0.1.13 and future versions. In this chapter, we will explore the testing of JavaScript and ReactJS-related stuffs. First, we will be going through the testing as a whole using different JavaScript test frameworks and how we can run the tests, followed by testing views build with the ReactJS library.

The following are the things we will be covering in this chapter:

• Testing in JavaScript using Chai and Mocha

• ReactTestUtils to test React components

• Exploring Jest

• Testing React-based app using Expect, Mocha, and Shallow rendering

There are various ways that you can mix and match while testing JavaScript. Let's have a brief overview of the various things such as frameworks, assertion libraries, and testing tools. The list given here is not an exhaustive one, and covering all of them in detail is beyond the scope of this book.

Mocha and Jasmine...

Testing in JavaScript using Chai and Mocha

As discussed earlier, in order to write test cases for the React code, we will be installing some testing libraries to run tests and write assertions. Let's walk through the setup for the Chai assertion library and the Mocha testing framework. We need to install the libraries with the help of npm.

In the terminal type:

npm i -D mocha chai

Note

install shortform: i

devDependencies shortform: D (the package will be installed only in a development environment)

After the Chai and Mocha libraries are installed by the previously mentioned command, they can be found under the node_modules directory.

We need to add the Mocha and Chai entries in our package.json file.

Package.json code

{
  "name": "JSApp",
  "version": "1.0.0",
  "description": "Get random numbers",
  "main": "index.js",
  "scripts": {
    "test": "mocha test.js"
  },
  "devDependencies": {
    "chai": "3.2.0",
    "mocha": "2.2.5"
  }
}

According to https://docs.nodejitsu.com/articles/getting-started...

Testing using ReactTestUtils

ReactTestUtils is used to test React-based components. It can simulate all the JavaScript-based events, which ReactJS supports. The documentation is cited in the Facebook developer site (https://facebook.github.io/react/docs/test-utils.html).

The code is as shown for the stimulate function:

Simulate.{eventName}(
  DOMElement element,
  [object eventData]
)

Installing React and JSX

As mentioned earlier, while installing the Chai and mocha, we are here installing React- and JSX-specific test tools (ReactTestUtils) in order to ease our task. Let's explore the ReactTestUtils with help from some React-based components and stimulate them to test the behavior and functionality.

The following is an example of such a code.

We need to install the jest package via npm with the following code in the terminal:

sudo npm install jest-cli –save-dev

sudo/root access to the machine/server where the node packages has to be installed is required. This is particularly required as the directory...

The jestTypical example of a Testsuite with Mocha, expect, ReactTestUtils and Babel

Let's see a typical example of package.json, which is using the following:

• Mocha as a testing framework

• Expect as an assertion library

• ReactTestUtils to test react-based JavaScript components

• Babel used as a transcompiler, which changes the ES6 codes into currently compatible (ES5) JavaScript code.

The example of package.json file:

"scripts": {
    "test": "mocha './src/**/*.test.js' --compilers js:babel-core/register",
  },
  "devDependencies": {
    "babel-core": "6.1.4",
    "babel-loader": "6.1.0",
    "babel-preset-es2015": "6.1.4",
    "babel-preset-react": "6.1.4",
    "babel-preset-stage-2": "6.1.2",
    "mocha": "2.3.3",
    "react-addons-test-utils": "0.14.3",
  }
}

As in the previous examples, within the script object, we keep the the test files and all the test files follow the convention of ending with the .test.js extension. Any extension for the test files can be used. For compilation from ES6 code...

Testing with shallow rendering

Shallow rendering is a method used while testing React components in which the component is "one level deep". Such a shallow-rendered test component has the facts regarding the returned things with respect to the render methods. Such components do not have the child components attached to it, and it does not require DOM.

Thus, while testing with a shallow rendering method, it should be remembered that any changes in the parent component that has the DOM changes and/or any child components been changed may require in rewriting the test.

Let's explore this with help of some code. In the following example, we will be creating a React component (GreetingComponent) where the render method will return a div with two children (h2 and span elements).

The code of greeting.js:

// greeting.js

import React from 'react';

const { div, h2, span} = React.DOM;



export default React.createClass({

  displayName: 'GreetingComponent',

  render(){

    return(

    div({classname...

Summary

We saw how we can test the different components in a React-based application and JavaScript as whole. In order to test a JavaScript code, we used chai and expect as assertion libraries, jasmine and jest as testing frameworks. To test a React application, we used ReactTestUtils and shallow rendering. In the following chapter, you will be learning about the deployment process of a React application. We will be exploring more about package.json, which we touched on in this chapter.