Profiling slow tests
Loading "04 01 Problem"
04 01 Problem
Run locally for transcripts
There are numerous factors that can contribute to the performance of your test suite: the number of tests, the amount of test setup, the speed of the tested code itself. But no matter the factors, you have to know how to spot a slow test and what to do to improve it.
When it comes to dissecting any performance degradation, a gut feeling or a guess what might be making your software slow simply won't cut it. You need to know for a fact how that degradation manifests and where it stems from. Only then can you design an appropriate plan to fix it for good.
Profiling
Profiling is an essential process in analyzing code performance. Your tests are still code—the code you're testing wrapped in your testing framework. Profiling it will come down to measuring critical points of the test's execution and analyzing the resulting report to see which areas consume most time/CPU/RAM/etc.
You employ all sorts of tools to help you with profiling. From the built-in "Profiler" in your browser's DevTools to CPU and heap maps and even native profiling instruments in your testing framework.
But it all starts from a slow test (or a few). In our case, we have a
rows.test.ts test suite that's unusually slow:npx vitest run
✓ src/rows.test.ts (1 test) 563ms
✓ retrieves all the rows 562ms
Test Files 1 passed (1)
Tests 1 passed (1)
Start at 10:57:37
Duration 1.10s (transform 18ms, setup 0ms, collect 13ms, tests 563ms, environment 0ms, prepare 34ms)
Your task
👨💼 Your mission this time is to profile the slow test's performance and identify the area that costs it most time. There are a few ways to do that in Vitest, but today you will be using the
vitest-profiler plugin to help you out! Follow Kody to get it installed and configured in your project.🐨 Install
vitest-profiler as a dependency in your project:npm install vitest-profiler --save-dev
🐨 Import the
vitestProfiler function from vitest-profiler/plugin and add its call to the plugins array of your :import { defineConfig } from 'vitest/config'
import { vitestProfiler } from 'vitest-profiler/plugin'
export default defineConfig({
plugins: [vitestProfiler()],
test: {
globals: true,
},
})
🐨 Finally, head to and add a new script called
test:profile. In that script, call the vitest-profiler CLI like this:{
"scripts": {
"test": "vitest",
"test:profile": "vitest-profiler npm test"
}
}
Notice that you are passing the test commandnpm testas the argument to thevitest-profilerCLI. It will use that command to run the tests the same way you normally do.
Alright, this has you equipped with the profiler! What's left is to run
npm run test:profile and analyze the results. Feel free to refer to the vitest-profiler README for more details on how to read the profiling report.
