Profiling slow tests

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

vitest.config.ts

import { defineConfig } from 'vitest/config'
import { vitestProfiler } from 'vitest-profiler/plugin'

export default defineConfig({
	plugins: [vitestProfiler()],
	test: {
		globals: true,
	},
})

🐨 Finally, head to

package.json

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 command npm test as the argument to the vitest-profiler CLI. 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.

04. Performance/01. Profiling slow tests (💪 problem)

Profiling slow tests

Profiling

Your task