Building and Testing ReactJS apps

Speaker Jean-Marcel Belmont

Software Engineer at Genisys

Organizer of Code Craftsmanship Saturdays and Papers We Love Raleigh

Army Veteran, husband, and father of 2 children

JavaScript Ecosystem is somewhat of a Dumpster Fire

FrontEnd Architecture:

React.js

React Router

Redux

Sass

BackEnd Architecture:

Node.js

Express.js

RethinkDB

Development environment starts with the command npm run dev

This npm script executes a gulp task that does a series of actions like linting, copying files and set watchers

It wraps server in nodemon process so that changes are automatically picked up by the server.

Webpack is also monitoring changes on the front end and will hot reload code changes

This API for the FrontEnd and BackEnd was driven by Test-Driven Development (TDD)

I am using several testing libraries avajs, jest, testdouble, supertest, and nock

Jest

Jest is a newer testing library created by facebook that has nice integration with React although it could be used outside of react.

Jest has this concept of snapshot testing.

I added both snapshot tests and traditional unit tests for the action creators and reducers.

TAP
Avajs is based on the Test Anything Specification (TAP)

TAP has a focus on simplicity and originally came from PERL but has since been ported to other Programming Languages.

Mock Libraries:
  • TestDouble.js
  • Node Nock
TestDouble

Testdoublejs is a mocking library like sinon.js but with a smaller api surface.

NOCK

Nock is an HTTP mocking and expectations library for Node.js

Nock can be used to test modules that perform HTTP requests in isolation.

SuperTest

Super-agent driven library for testing node.js HTTP servers using a fluent API

I am using Nock in conjunction with Supertest to both hit my api endpoints and mock out responses for the endpoints.

Along with TDD should go the concept of Continuous Integration and Code Coverage IMO.

I have a Travis CI Yaml Script

Additionally I have the code coverage tool called Coveralls hooked into Continuous Integration.

Additionally Tools Used:
  • Dotenv
  • Eslint
You should never publish your API Secrets and tokens.

I am using a small npm module called dotenv that reads into environment variables into process.env

Using a linting library like Eslint will help catch errors before they occur

They also help keep coding styles in sync in larger projects.

Libraries for React.js:
  • React Router
  • Redux
Redux

Redux is a predictable state container for JavaScript apps.

The whole state of your app is stored in an object tree inside a single store.

The only way to change the state tree is to emit an action, an object describing what happened.

To specify how the actions transform the state tree, you write pure reducers.

React Router

React Router is a complete routing library for React.

Code Exploration, Running Tests, and implement an action creator and a reducer.