React Testing automation

Use Jest and Enzyme to make your React apps great again

Overview

Scaffold tests using mocks
Jest workflow
Coding tests
SnapShot Testing
Learning resources
More on front-end styling

This article examines the automated testing of ReactJs using Jest.

React is also called ReatJS because it’s a Javascript library, developed in 2013 by Jordan Walke of Facebook. In fact, React is the 5th most starred JS library on all of GitHub, used on major sites including Netflix, Khan Academy, and many others.

Isomorphic React (Universal)

React.js Essential Training June 20, 2018 [3h 15m] by Eve Porcello

Scaffold tests using mocks

Jest is a test runner built on top of Jasmine and Mocha to add “spies” (a superior assertion library to verify side effects), plus snapshot testing, and module mocking. Even though Jest was built by Facebook’s React team (and share the MIT open-source licensing), Jest can also test apps not built with React (except for jQuery).

https://github.com/facebook/jest

https://facebook.github.io/jest forwards to
https://jestjs.io

Ezyme is a “test renderer” to express component output as HTML. It was built by AirBnB specifically for React apps. It has many open issues, so many avoid it. React-Test-Renderer is recommended over Enzyme

Test runners organize tests into “describe” suites and “it” test blocks.

Jest looks for tests stored under a folder named with two double-underlines:

   __tests__/*.test.js
   __tests__/*.spec.js

Jest workflow

NPM triggers Watcher

BLAH: Jest was not designed to integrate with version control, and so it’s integrated into dev’s workflow.

Coding tests

Matchers look different than app code:

function test2() {
	constvalue = getValue42();
	expect(value).toEqual(42);
}

https://facebook.github.io/jest from https://facebook.github.io/jest/docs/en/expect.html

Avoid side-effects –any AJAX calls, UI changes or other side effects are handled by sagas, thunks, etc., but not by components

Test Container and Display elements separately

SnapShot Testing

multiple kinds of tests

unit tests verify that individual methods and properties passed by container are accurate
component tests
snapshot tests verify output of the display component, passing props in directly

Learning resources

React: Testing and Debugging July 5, 2017 [1h 17m] by: Emmanuel Henri,

<a target=”_blank” href=”https://app.pluralsight.com/paths/skills/react React Path of courses that take over 50 hours in total

Testing React Applications with Jest 11 May 2018 [3h 36m] by Daniel Stern (@danielJackstern)

https://github.com/DanielStern/Isomorphic-React This application is a basic API client which gathers data from an outside API (in this case, Stackoverflow) and generates an isomorphic, single-page application (SPA).

Testing

More on front-end styling

This is one of several topics:

Wilson Mar