Improve Build Times by Speeding up Jest Tests with Multiple Suites

By Using GitHub Actions To Run Jest Test Suites In Multiple Parts

Nate Geslin

--

Photo by Nicolas Hoizey on Unsplash

At Parallax, we use Jest to test our application. One of my primary objectives is to make it easy as possible for my team to add tests.

As of this writing, we are somewhere in the neighborhood of 2,500 tests. Most of the tests are unit tests. About half of those tests are for React components. The other half are for classes and utility functions. With that number of tests, it was starting to get painful to run the entire suite in one shot. Especially in CI for pull requests. The test runs were taking 20–30 mins some days and that is without collecting coverage.

This was a problem because my team will open 5 to 20 pull requests a day, and long test runs were killing our productivity.

We needed to speed this up. We needed something faster.

Solution

Before I can get to the details on how we solved this, let us first take a small detour.

File Naming Conventions

At Parallax, our app follows a strict file naming convention where we’ve borrowed aspects from Angular. Like many React projects, ours has a mix of components, constants, models, services, stores, utils, etc.

Generally, our convention is .concern.ts or .concern.tsx. I’ll show you some examples:

domain/department/department.utils.ts
domain/department/department.service.ts
domain/department/models/Department.model.ts
components/pages/department-page/DepartmentPage.tsx
components/pages/department-page/DepartmentPage.constants.ts
components/pages/department-page/DepartmentPage.store.ts
components/pages/department-page/DepartmentPage.utils.ts
components/ui/ui-button/UiButton.tsx

Why do we care (and we care a lot) so much about this structure? It makes it easy for a person or machine to find things.

If I want to find all the page stores in the application, it’s a pretty simple glob like this: **/components/pages/**/*.store.ts. Or if I wanted to find all the domain utils: **/domain/**/*.utils.ts. Or all the…

--

--