Configuring React 16 + Jest + Enzyme + Typescript

A week ago, Facebook released React 16 but this post isn’t about its latest features. Today, I’m going to show you how to build a development stack with React 16, Jest (testing framework), Enzyme, and Typescript.

Introduction

I am making a video tutorial about building a universal application with React 16, Express, and Typescript. This is the ultimate goal, however, in this post, I create a simple application setup for the client. In upcoming posts, you’ll find more information about the complete setup; I want to create something more complex than the TodoApp tutorial, with real-life scenarios such as dealing with data normalization in Redux, at least, that’s the plan. For now, I am going to focus on the playground configuration.

I am using the following libraries and tools:

• React 16.
• Jest — testing solution for React made by Facebook.
• Enzyme — testing library that makes testing even more convenient and is recommended by Facebook.
• Typescript — programming language, a superset of JavaScript that adds a few nice-to-have features such as interfaces, static typing, and a couple of other things. It’s compiled to ES5 or ES6.
• Webpack — a bundler for static files such as scripts, styles, fonts, images and so on.
• Node v7.9.0
• NPM v4.2.0

The application structure is going to look like the above but I am going to focus only on the client side in this article:

.
├── src
│   ├── client
│   │   ├── components
│   │   │   ├── Hello.tsx
│   │   │   └── __tests__
│   │   │       └── Hello.spec.tsx
│   │   ├── index.tsx
│   │   └── styles
│   │       └── style.scss
│   └── server
│       └── index.ts
├── target
│   ├── bundle.css
│   ├── bundle.css.map
│   ├── bundle.js
│   └── bundle.js.map
├── test-preprocessor.js
├── test-setup.js
├── test-shim.js
├── package.json
├── tsconfig.json
└── webpack.config.js

Let’s get started!

At the beginning, we need to create a new application by typing the following command:

$ npm init -y 

and install all the required dependencies…

$ npm i --save react react-dom awesome-typescript-loader source-map-loader typescript webpack @types/react @types/react-dom

…and development dependencies.

$ npm i --save-dev enzyme enzyme-adapter-react-16 jest react-test-renderer @types/enzyme @types/jest

Now we can start to configure our React development stack.

Configuring Webpack

The first thing we want to configure is Webpack because it is the most important piece. I am going to use Webpack to transpile to ES5 and bundle the client version of the React app. In the future, we are going to extend this configuration to support styles and images processing.

To create a configuration file, type in your console command:

$ touch webpack.config.js

and paste into the file the following code:

This configuration allows you to import files with Typescript extensions (.ts and .tsx) as well as .js and .json. Furthermore, it generates the source maps for the bundled code so we can easily debug our application in the browser’s developer console (e.g. Chrome DevTools).

Configuring Typescript

The next thing I need to prepare is a configuration file for Typescript. Why? The transpiler needs to know what kind of output needs to be generated. Do we want to get ES5 or ES6 output? Do we want to generate source maps? All these things must be specified in the configuration file.

To create a configuration file, type in your console command:

$ touch tsconfig.json

and paste into the file the following code:

The property skipLibCheck is important for us, as it’s needed to work with Jest framework. The Jest’s file definitions miss the Set class so that Webpack will throw an error when we start to create unit tests.

Hello World!

Now we can create the first component, so we can check our current configuration. We actually need to create two files; the component file and the main file which will be used as the entry file for Webpack. All component files will be stored in the src/client/components directory.

To create a component file, type in your console the following command:

$ mkdir -p src/client/components
$ cd src/client/component
$ touch Hello.tsx

and paste into the file the following code:

Now we can create an entry file:

$ cd ..
$ touch index.tsx

and fill the file with the following code:

The first component and the entry file are ready. Now, let’s test the Webpack configuration.

To do so, type the following commands in your console window:

$ cd ../..
$ ./node_modules/.bin/webpack # (in the project root)

Configuring Jest + Enzyme + Typescript

The last thing to configure is the connection between Jest, Enzyme, and Typescript. At this point, you need to create three files:

• test-preprocessor.js — to transpile test files written in Typescript to JavaScript.
• test-setup.js — to setup enzyme to use React 16.
• test-shim.js — to get rid of warnings regarding missing browser polyfills.

All these configuration files are JavaScript files, it doesn’t make sense to define the transpilation process for them. It isn’t likely that you are going to modify them often. I advise you to keep all configurations as simple as possible.

Create these three JavaScript files:

$ touch test-preprocessor.js
$ touch test-setup.js
$ touch test-shim.js

Paste the following code snippets to the files:

After we have created all our configuration files, it’s time to bind them together. In order to do so, we need to modify the package.json file and add the jest property to its content. Afterwards, the package.json file should look more or less like this:

All the properties are self-describing. It’s also necessary to add to the moduleFileExtension property .js extension, otherwise the framework isn’t going to work. I decided to split the setupFiles into two files as it will be easier to remove the test-shim.js file from it when Facebook fixes a warning with missing polyfills in the Jest framework (related to React 16).

Why I need the test-shim.js file?

Jest framework runs inside the console and the console doesn’t have access to the window object (only browsers have it). That’s why Jest uses a library called JSDom to mock the window object. I assume that JSDom doesn’t contain the implementation of the requestAnimationFrame method yet so Jest throws up the following warning:

React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers. http://fb.me/react-polyfills

Writing the Unit Test

Finally, we can write the unit test to the React component.

$ mkdir -p src/client/components/__tests__
$ cd src/client/component/__tests__
$ touch Hello.spec.tsx

and paste the following code:

Now let’s try to run it!

$ cd .../.../.../...
$ ./node_modules/.bin/jest
> jest

PASS  src/client/components/__tests__/Hello.spec.tsx
  ✓ renders the heading (8ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.304s
Ran all test suites.

It works! :)

Summary

I really appreciate that you got all the way to the end. I wrote this article to share new ideas, so some of my thoughts might be wrong. If you have any problems or suggestions, please write a comment.

I have published the code on GitHub, so you can see the complete code here: https://github.com/mateuszsokola/open-joblist

This article is part of something bigger. I have also started a video tutorial called „Getting Started with React 16”. The tutorial has two episodes so far and if you are interested in it, please subscribe to my channel!

Episode 1: https://youtu.be/sqYj4kPfaZY

Episode 2: https://youtu.be/-CqIg-Vjsng

Thank you for your time.