Hello React Vitest

React and Vitest UI

Configure Vitest UI in React projects

2022-12-26
3 min read
Difficulty
react
typescript

Vite offers a super useful package to manage your test by using a Web UI:

npm i -D @vitest/ui

You can now run from command line the following command:

vitest --ui

or add a new script to package.json to run it by using npm run test:ui.

It should automatically open a new page on your browser after running it:

JavaScript
package.json
scripts: {
  // ...
 "test:ui": "vitest --ui",
}

You can also directly update your tests from the UI and it will update your source code:

The useful "Module Graph" tab also shows your dependencies:

The next recipes describes how to configure tools for test coverage:

Keep updated about latest content
videos, articles, tips and news