My First Blog - React, Jest, CircleCI

The React application we were writing started to grow in size, as did the tests. Our repo was hooked up to CircleCI (other CI providers are available) which ran npm test for us. Things were going well, then all of a sudden, out of nowhere, the tests started failing. This lead us to identify some issues we had with our testing setup which I shall outline here.

The main reason the tests were failing in CircleCI was the linux boxes they were running on were running out of memory and falling over. The first thing we did was add a new testing call in package.json, this was test:ci and was to be run by CircleCI as part of the build process:

"test:ci": "tsc && react-scripts test --runInBand --logHeapUsage"

The --runInBand flag forces the tests to run one at a time. This slows the process down considerably so isn't ideal to have running in development (hence the new script which we configured circleCI to run). The --logHeapUsage flag is solely for debug and allows you to see the memory usage for each test suite, something that would have given us a better idea of the issue straight away.

There is also an issue with jest (our test provider) and garbage collection. Garbage collection isn't automatically done, so we needed to add this. Initially we changed our test:ci script in the package.json file to:

"tsc && react-scripts --expose-gc test --logHeapUsage --runInBand"

The --expose-gc flag opens up garbage collection from the node process. Secondly we needed to add:

afterEach(() => {
  if (global.gc) {
    global.gc();
  }
});

to the file that contains your jest setup. Both of these together enables garbage collection, thus reducing the memory used by the complete test suite.

These fixes solved our problem. CircleCI was now able to run the tests successfully!