Learn how to write unit tests with Vitest.
Vitest is a Vite-native unit test framework. With a focus on speed, it is designed to be a fast and lightweight alternative to Jest.
Let's start by creating a basic test suite. A test suite is a collection of test cases that are executed in a single run. It is defined by a test suite function that contains one or more test cases.
In below example, we have create a function that returns the sum of a list of numbers.
We then create a test suite that contains three test cases.
The logic of each test case is pretty straightforward. We simply call the function with some input and check if the output is as expected.
To run the test suite, we can use the
npx vitest command. And you should see the following
output in the terminal.
RERUN sum.test.ts x1
✓ sum.test.ts (3)
✓ #SUM (3)
✓ should return 0 for empty array
✓ should return 1 for [1]
✓ should return sum of all numbers
Test Files 1 passed (1)
Tests 3 passed (3)
Start at 14:45:35
Duration 11ms
PASS Waiting for file changes...
press h to show help, press q to quit
As you can see, all three test cases have passed. Well done! You have successfully created your first test suite with Vitest.
Let's take a look at how we can write tests in the same file as the code being tested.
In-source testing is a way to write tests in the same file as the code being tested. It is useful for small projects where the overhead of maintaining separate test files is not worth it. One of the great things about Vitest is that it supports in-source testing out of the box.
To enable in-source testing, you can simply add a
test block after the function definition.
If you are using TypeScript, you will need to add some configuration
to your tsconfig.json file to avoid your editor yelling
at you. Checkout the
Vitest documentation
for more details on in-source testing and TypeScript configuration.
Vitest comes with code coverage support!
Code coverage is a measure of how much of your code is covered by tests. It is a useful metric to track the quality of your tests.
To enable code coverage, we can use the --coverage flag
in the CLI.
After running the test suite, we can see the code coverage report in the terminal.
We can also generate a code coverage report in HTML format. To do
that, we can edit the vite.config.ts file and add the
following code.
After running the test suite, we can see the code coverage report in
the coverage folder.
As you can see, the code coverage report is generated in HTML format and it is much easier to read than the one in the terminal.
Vitest comes with snapshot testing support too! Let's see how it works.
Snapshot testing is a way to test if the output of a function is correct. Let's see what it looks like in Vitest.
When using snapshot, Vitest will take a snapshot of the given value, then compares it to a reference snapshot file stored alongside the test. The test will fail if the two snapshots do not match: either the change is unexpected, or the reference snapshot needs to be updated to the new version of the result.
Let's take a look at an example. We create a function that turns a string into uppercase. Then we write a test case to test if the code is working as expected.
When we run the test suite for the first time, Vitest will create a snapshot file for us.
The snapshot artifact should be committed alongside code changes, and reviewed as part of your code review process. On subsequent test runs, Vitest will compare the rendered output with the previous snapshot. If they match, the test will pass. If they don't match, either the test runner found a bug in your code that should be fixed, or the implementation has changed and the snapshot needs to be updated.
To Learn more, I recommend you to checkout the Vitest documentation for more details on snapshot testing.
That's it for today! We have learned how to use Vitest to test our TypeScript code and also some out of the box features that Vitest provides. I hope you enjoy this post and see you in the next one!