Testing Your Application

React makes it easy to integrate testing frameworks into your application. This is because

Simulate is a method that will utilize a simulated event so that you are capable of mocking

an interaction within your React application. The method signature for utilizing Simulate

Same as the previous method, once again anticipating a singular result with an error

thrown if more than one result is found.

You can take all of these methods and utilize them to augment your testing tool of

choice. For Facebook, that tool is Jest. In order to set up Jest on your machine, simply use

You can see that you can leverage the TestUtils included with React add-ons to build

tests that will allow you to assert the tests while building your application’s test suite.

Running Your Application

In this section, you will piece together the components you have constructed into a

working application. You will now take each of the components and assemble them. In

this case, you will be using browserify to combine your scripts, which were modularized

using CommonJS modules. You could of course combine these into a single file, or you

So, you can author your application in ES6 as well, but for this example the

application will be assembled using the existing source that was written using

The first thing that needs to happen is there needs to be a core app.jsx file that will

contain the code and become the main entry point to the application. This file should

include the necessary components to build the application. In this case, you need the

main application, which you will build in a second, and the authentication module.

The SignIn component binds to the click of the button, which will then essentially share

the result of that click with the _onAuthComplete function. This is the same as _onLogout,

which is handled in the navigation menu in the WorkoutLog component.

Speaking of the WorkoutLog component—now is the time to see it, as it is composed

within the render mechanism is controlled by state.view, which is the only state

parameter that is maintained at the WorkoutLog component level. This state is set when a

link in the <Nav/> components is clicked. As long as all your paths are correct and you are

using a command like this one:

The result will be bundled into bundle.js. You will be able to navigate to your

index.html (or whatever you named your HTML document) and view your working

React application. Congratulations!

Summary

In this chapter, you examined the process from conceptualization to final representation

of a React web application. This included utilizing wireframing ideas to visualize where

the components of your application would be split apart, or alternatively dissecting an