Struggling with react, webpack, jest, eslint and babel integration?

Emoji Credits working hard emoji credit Sad emoji credit Celebration emoji credit

TL;DR

Are you facing integration challenges with react, webpack, jest, eslint and babel, all playing nice? If so continue reading.

Prerequisites

Fundamental knowledge of react, babel, webpack, jest and eslint.

Source Code See code in git hub

Introduction

Problem Statement

I was getting below error when I tried to build with webpack. So I deduced this must be a babel integration issue and searched the web for a solution, I found some potential solutions which I attempted. However after 2-3 days, same outcome, no dice.

Unresolved error

Module parse failed: Unexpected token

One Possible Solution

I then stumbled on the solution namely Neutrino . This was suggested by the react documentation, click on image below to go to the link or click here

Neutrino is a companion tool which lets you build web and Node.js applications with shared presets or configurations. It intends to make the process of initializing and building projects much simpler by providing minimal development dependencies.

Below is the configuration which I have adopted to stand up my development environment.

Neutrino Configuration

Core Neutrino configuration is in the .neutrinorc file. See below:

Jest Configuration

There was some additional configuration required for jest test cases to be functional these are as shown below;

EsLint Configuration

This is pretty much standard configuration. Only additional configuration was to ignore the false positives (namely errors in the test code and some warnings) which are shown in the image below.

Conclusion

The whole exercise took about 6 hours including the research resolve either the webpack or the jest errors or both. I was then able to start on my unit tests so all is good with the universe.

References

#react #jest #eslint #neutrino