@vitest/ui

What is @vitest/ui?

The @vitest/ui package provides a graphical user interface for the Vitest testing framework, allowing developers to visually interact with their tests. It offers features such as real-time test results, test filtering, and interactive debugging tools. This enhances the testing experience by making it more intuitive and efficient.

What are @vitest/ui's main functionalities?

Real-time Test Results

Launches the Vitest UI in the default web browser, displaying test results in real-time as they are executed. This allows developers to quickly identify and address failing tests.

"npx vitest ui"

Test Filtering

This feature enhances productivity by allowing developers to isolate and run specific tests or test suites, making it easier to debug and fix issues.

In the UI, there's an input field where you can filter tests by their names, making it easier to focus on specific tests without running the entire suite.

Interactive Debugging Tools

Interactive debugging tools within the UI help in closely inspecting failing tests, allowing for a more efficient debugging process by stepping through tests and inspecting values at runtime.

The UI provides buttons and shortcuts to pause/resume test execution and to step through test cases, facilitating a more interactive debugging process.

Other packages similar to @vitest/ui

jest-dashboard

Jest-dashboard offers a visual interface for Jest test results, similar to @vitest/ui but specifically tailored for Jest. While it provides real-time feedback and test filtering, it may not offer the same level of interactive debugging tools as @vitest/ui.

karma

Karma is a test runner that works with any of the popular testing frameworks (like Jasmine, Mocha, or QUnit). It doesn't provide a UI out of the box but can be integrated with various reporters to achieve a similar effect. Compared to @vitest/ui, Karma is more flexible in terms of framework support but requires additional setup for a comparable user interface experience.

README

@vitest/ui

This package is for UI interface of Vitest.

Development Setup

At project root, create terminals with each of the following commands:

nr ui:dev

nr test --api