In this article, we will focus on optimizing unit testing in JavaScript. We will discuss some of the best tools for unit testing such as Jest, jest-circus, and React Testing Library (RTL) and show you how to configure these tools for optimal performance. We’ll also provide tips and best practices for improving your testing workflow, so you can ensure that your code is reliable and working as expected. Whether you’re a seasoned developer or just getting started with unit testing, this guide will help you improve your testing process and produce high-quality code.
Unit tests
I prefer to use the following tools for unit testing:
- Jest. It’s a JavaScript testing framework that can be easily integrated with any other testing and development tool.
-
jest-circus
test runner built on top of Jest and providing parallelized execution capabilities for tests. Starting with Jest v27, it comes as the default test runner in jest configuration. - React Testing Library. It’s a go-to tool for testing React components. I used to have Enzyme on this list a few years ago but unfortunately, it’s not maintained anymore and I highly don’t recommend using it in your project. You can read about the strategy and tools I use to migrate projects from Enzyme to RTL in my article.
Configuration
React Testing Library setup
JSDOM’s implementation of getComputedStyle()
is super slow. As I do not usually do any style-specific assertions and validations in my unit tests, I prefer to mock this API to speed up RTL tests by up to 2x.
// somewhere in your setup file
global.getComputedStyle = () => {
return {
getPropertyValue: () => {
return undefined;
},
};
};
Alternatively, you can switch from JSDOM implementation to LightDOM. You can try both approaches together as well.
No network calls
Network calls in unit tests might significantly slow down test performance. There is an easy solution for this: jest-offline
library. It will fast-fail all tests that attempt to access the network. If you are using fetch
API in your project then jest-fetch-mock
will automatically mock all API requests for you:
import { enableFetchMocks } from 'jest-fetch-mock';
enableFetchMocks();
But some third-party libraries might use different mechanisms to integrate with the network API (good old XHR requests, for instance). Therefore, I prefer to use these 2 tools together — they perfectly complement each other.
Transpiler
If you are using babel-jest
or ts-jest
in your Jest configuration to transpile JavaScript/TypeScript files, then I have bad news for you - they will slow down your tests too! Nowadays, cool kids use swc/jest
or esbuild
transpilers that are written by faster Rust and Go languages respectively. It's easy to switch - highly recommend you do it right away. Really a low-hanging fruit for improving your test performance.
Tools
Use jest-slow-test-reporter
to identify what tests are the slowest! Usually, you will get a significant performance boost by addressing just a small portion of your tests. My rule of thumb is unit test execution time should not exceed 300ms.
Local development
Commands:
"test": "TZ=America/Los_Angeles LANG=en_US.UTF-8 jest --config jest.config.json --passWithNoTests --maxWorkers=50%",
"test:bail": "npm test -- --bail",
"test:diff": "npm test -- -o --watch",
"test:clean": "jest --clearCache"
Hints:
TZ=America/Los\_Angeles LANG=en\_US.UTF-8
environment variables are needed to lock dates and timezones - crucial when you have Node v14+ and use date-fns-tz in your code.
--maxWorkers=50%
usually help to improve test performance by 20% but requires careful benchmarking. Inspired by this article.
I prefer to use JSON file (jest.config.json
) for configuration rather than .js
or .ts
. Reason: jest
is requesting ts-node
from the transpiling of jest.config.ts
. For TypeScript file improvement usually 2X, for JS files it's pretty much the same as JSON.
--bail
command is useful when you need to do a quick sanity check whether all tests are still passing - run tests until the first fails. If fails, use a more suitable command for continuous troubleshooting and fixing the tests.
test:diff
will run only tests for files staged in your local Git workspace and will do it in watch mode. This is the most popular command in my arsenal that I usually run while I refactor some existing code (for example, re-writing React class component to functional component). With good coverage and well-written test code, it's super easy to catch regressions.
Submitting code review
If you still don’t use husky
and lint-staged
as part of Git pre-commit hook integration, then you should. Here is the configuration I usually have:
"lint-staged": {
"*.{js,jsx}": [
"eslint -c ./.eslintrc.js --fix",
"git add",
"npm test -- --findRelatedTests"
]
}
npm test -- --findRelatedTests
will run only tests related to files that have changed. You can read more about how it works in one of my previous articles.
Storybook
If your project uses StoryBook to run your components in isolation (let’s say you have an internal UI library), then you can also include start-storybook --smoke-test
to your pre-commit configuration - it will execute dry-run of the start command and fail immediately if something is wrong (maybe you have some breaking change in the component contract?).
Also, you can use storyshot add-on to automatically cover all components in your UI library with snapshot tests.
Continuous integration (CI)
Command
"test:ci": "npm run test -- --runInBand"
According to this GitHub issue, --runInBand
performs better in CI environments rather than local ones due to the resource constraints of such environments. Basically speaking, with runInBand
we tell Jest to run tests serially rather than orchestrate a thread pool of test workers. Please benchmark it if you can - from my previous experience, "it depends". I guess I was lucky enough to have powerful CI machines.
Conclusion
In conclusion, unit testing is a crucial part of software development that ensures the quality and reliability of your code. By choosing the right tools and configuring them properly, you can improve the performance of your tests and streamline your testing workflow.
Originally published at https://thesametech.com on January 24, 2023.
You can also follow me on Twitter and connect on LinkedIn to get notifications about new posts!
Top comments (0)