This will be a brief tutorial on how to setup Vitest, Testing Library, and jest-dom in your Vite Project.
Setup Vite Project
Before we can setup our testing tools, we first need a Vite project. We can scaffold a Vite project easily by running the command:
Next, you’ll be prompted for your project name, your front-end framework of choice, and whether you need Typescript or not.
In this project, let’s assume that we choose Svelte as our front-end framework and Typescript as our language of choice.
The steps are more or less the same regardless of what framework you’re using.
The next step is to install Vitest using the command:
We also need to install
jsdom to simulate the DOM for our frontend app.
Next, we need to tell Vitest to change our testing environment to
jsdom. Create a file called
.js depending on your preferences, and pass the following code in.
One thing to note about Vitest is that unlike Jest, globals are not enabled by default. This means that we have to explicitly import
expect, etc. on our test files like this:
But if you prefer, you can enable the test APIs globally like Jest. To enable globals support, we need to add the following line into our
If you’re using Typescript, we need to do one extra step to please the type checker. We need to add
And finally, let’s add the following to our
package.json file for convenience sake.
Now, we can run our tests with
npm run test or
npm run test:watch to run in watch mode.
Install Testing Library
Installing Vitest is enough to test our app. But Testing Library offers us a lot of utilities that’ll make our life easier.
For example, the
render method save us the trouble of creating a container, appending it to the body, and cleaning up the container after test, etc.
Testing Library supports multiple framework. And since we’re assuming that this is a Svelte project, we’ll be using the Svelte Testing Library.
jest-dom is a really nice addition on top of Testing Library. It’s a custom matcher that’s really useful to test the state of the DOM.
Matcher is what you put after
expect. For example:
toBeDisabled()is one of the useful matchers provided by jest-dom.
Install it by running:
Now, we can use the matchers by importing
@testing-library/jest-dom at the start of our test files.
We can make our experience even better by extending the matcher with a Vitest setup file. The filename doesn’t matter, but let’s assume that the file name is
./src/tests/setup.ts. Inside the file, paste in the following code:
We also need to tell Vitest where to look for our setup file.
Now, we don’t need to manually import
@testing-library/jest-dom anymore in our test files.
One final thing before we end this tutorial.
In my case, Typescript couldn’t find the type definition for the matchers. So even though all my tests run just fine, I didn’t get auto completion for the matcher in my IDE and got a squiggly red line instead.
If you have the same issue, install the type definition for jest-dom.
If you’re not using Typescript, or don’t experience this issue, you can skip this step.
And update your
With that, everything should now work as expected 😁.
That’s it, we’re done with our test setup. Now simply create your tests, and run it using the command: