A comprehensive guide to setting CI with CircleCI, Jest, Enzyme for React: org setup update 2

As there have been a lot of guides on the internet regarding testing and CI setup, I did run into a lot of issues(part of being an engineer). I will try to make this as helpful as possible.

CRA sucks for Jest-Enzyme testing!!
Don’t know if it’s just me or others have faced this issue as well. There is something wrong with CRA or rather webpack, which didn’t let me setup testing that easily

So in an overview, this is what CI setup process looked like in my head:

• Write tests
• Writing the config.yml file for CircleCI
• Push the code to the repo and build it on Circle CI itself(Probably not so comprehensive as this is automated)

The repo we will use will be from my org WrippleFOSS. We are a small organization selected in GSSOC 2019 and also got featured in RGSOC 2019 blog.

You can find out more about the org by visiting the link.
(Please contribute…)
We also have a discord channel that you can join and talk to the other devs/designers who are out there https://discord.gg/7TahF4D

It was much more difficult than I had assumed. Partly cz of CRA. I don't know why am I hating on CRA so much but eh who cares?! So I Jest wanted to test it 😉.

It was difficult with CRA so I used Parcel.

1. Jest setup

This was simple.
Just run

npm install --save-dev jest

However, you need to change a few things

./package.json

{
...
  npm:{
     ...
     "test":"jest",
    ...
  }
...
}

Testing in React with Jest and Enzyme: An Introduction

Everything You Need to Know About Parcel: The Blazing Fast Web App Bundler 🚀

Upon doing this, the bundler would take care of any tests with the file name ending as.test.js or .spec.js

2. After setting it up you need to setup enzyme

npm install --save-dev enzyme enzyme-adapter-react-16

Doing that is not enough you need to initialize the adapter

create a ./setupTest.js in your source folder

./setupTest.js

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

This is how you configure the adapter. The bundler will take care of the rest.

3. Writing a simple unit test

Inside the __specs__ folder, I created a file named

./__specs__/app.test.js

import React from 'react';
import { shallow } from 'enzyme';
import App from '../components/app';
describe('First React component test with Enzyme', () => {
  it('renders without crashing', () => {
  shallow(<App />);
});
});

This will be the unit test that happens, at the moment.

4. Configuring jest

But if you run a npm test right now, it won't work. This is where it was an issue for me as no other documentation was able to provide much insight into the problem that I was facing. Alas! It was stack overflow.

You need to have a jest.config.json which would point to the configured adapter. It would look something like

./jest.config.json

{ "setupFiles": [ "raf/polyfill", "<rootDir>/setupTest.js" ] }

Now if you run npm test , it should run.

5. Configuring CI

Having said that, Now comes the time for the CI.

You need to configure a yaml file for CircleCI to know what the heck is it supposed to do.
Mostly, it’s just you automating the tests that you would have done by yourself.

You do this by writing specific instruction in the config.yml file inside .circleci folder.

./.circleci/config.yml

# Javascript Node CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-javascript/ for more details
#
version: 2
jobs:
build:
docker:
# specify the version you desire here
- image: circleci/node:7.10
# Specify service dependencies here if necessary
# CircleCI maintains a library of pre-built images
# documented at https://circleci.com/docs/2.0/circleci-images/
# - image: circleci/mongo:3.4.4
working_directory: ~/repo
steps:
- checkout
- restore_cache: # Download and cache dependencies
keys:
- v1-dependencies-{{ checksum "src-view/package.json" }}
# fallback to using the latest cache if no exact match is found
- v1-dependencies-
- run: cd src-view && npm install
- save_cache:
paths:
- src-view/node_modules
key: v1-dependencies-{{ checksum "src-view/package.json" }}
# run tests!
- run: cd src-view && npm test

To keep in mind that every step takes place in the root folder, so you need to cd into your desired directory.

6. Setup CI

Now that that’s done time to build the project in CircleCI.

Click on Add projects and then on Setup Project for the repo that you want to setup CI in.

Select Linux and if you already have the config.yml ready, click on start building.

AND THAT’S IT!

That should take care of your CI.

That should do it.

Hope that it works for you. Give a clap if this helped you and do comment or reach out to me if there is some issue that you ran into.

Until then…