Enhance Your Testing Workflow with vitest

vitest is a versatile testing tool that provides various options to run tests. Here's a breakdown of how you can use it:

Running Tests in Watch Mode

By default, vitest runs in watch mode. This means that the tests will re-run automatically whenever there are changes in your functions.

For example, if you have a script defined in your package.json as:

{
  "scripts": {
    "test": "vitest"
  }
}

You can run it with the following command:

npm run test

If your function fails and you update it, vitest will run again, giving you immediate feedback.

Running Tests Once

If you wish to run the tests just once without entering the watch mode, you can use the vitest run command.

You can add this to your package.json scripts as:

{
  "scripts": {
    "test": "vitest",
    "test:once": "vitest run"
  }
}

And then run it with:

npm run test:once

Accessing the vitest UI

vitest comes with a built-in UI which can be accessed using the --UI flag.

In your package.json, you can have a script like:

{
  "scripts": {
    "test": "vitest",
    "test:ui": "vitest --ui"
  }
}

To launch the dashboard along with the tests in watch mode, use:

npm run test:ui

vitest ui

This dashboard provides insights into:

each test and its report:

single test

the module graph:

module graph

the code where the test originates from:

code tested

Passing Flags to Package Scripts

When you want to pass additional flags to the script with npm run, you might encounter an issue. For instance, running:

npm run test --ui

Won't work as expected. This is because the --UI flag is being passed to npm and not to the vitest command.

To correctly pass the flag, use an additional double dash -- before your flags, like so:

npm run test -- --ui

This tells npm that the subsequent flags should be passed to the script and not npm itself.

In conclusion, vitest offers a rich set of features to help you run and monitor your tests effectively. Whether you prefer the watch mode for continuous feedback or need the UI dashboard for detailed insights, vitest has you covered. Remember to use the double dash -- when passing flags to your npm scripts to ensure they work as intended.

When I have a package script like this I can run it with npm run test. vitest runs in watch mode automatically so that if I change my function to fail it will run if I update it will run again.

If instead I only wanted this to run one time I can run vitest run. In my package script I could add a another script tag vitest run like that and then npm run test once. It'll run once and then quit.

vitest also comes with a UI which we can access with a flag dash dash UI. So I'll add another script vitest dash dash UI and I'll run npm run test UI which as well as running my test in watch

mode will launch this dashboard where I can look at each test its report the module graph and the code where the test goes from. Creating these multiple test functions just to pass these parameters can be a bit frustrating especially for parameters that you're only using once or twice.

If I do npm run test run then that will do the same as test once so we can get rid of that one. If I do npm run test dash dash UI that does not launch my UI and that's because

this dash dash UI flag is being passed to npm and not to the script that npm run test is pointing towards. If I do want to pass additional flags to this script in other words reproduce this vitest

dash dash UI then before my flags I do a separate dash dash. This is telling npm that anything that comes after this point shouldn't be passed to npm but should instead be appended to the end of the

script tag. So this npm run test dash dash dash dash UI is the same as vitest dash dash UI so it's the same as this. So if I run this as well as running my tests I also get my dashboard. So you can pass arguments to package scripts in line but to be able to pass

flags to package scripts you have to use an additional double dash.

Enhance Your Testing Workflow with vitest

Transcript

More Tips