The Vitest UI

Since Vitest is based on Vite, it does make good use of some of its features, not only for live testing but also to provide a live development server displaying the tests in real time. To make use of this option, we only need to install the appropriate dependency as follows:

$ npm install –D @vitests/ui

Then, for convenience, we should add the following line in our package.json file so we can run the application using npm:

scripts:{
    "test:ui": "vitest –-ui"
    // Other settings...
}

We can then run the server with this command line:

$ npm run test:ui

The development test server will start and provide us with an address to open in the browser. For our application, this looks like this:

Figure 9.6 – Vitest UI dashboard

The web UI has also new possibilities to interact with the test cases, and even see the relationships between components...