Vitest

Introduction

Vitest is a next-generation testing framework powered by Vite. It includes a smart and instant watch mode and is compatible with Jest. Moreover, TypeScript, ESM, and JSX are also supported.

React Testing Library is a simple and complete React DOM testing utilities that encourage good testing practices.

Reason for Mandatory Tool

DevIniter believes that testing is one of the most important processes in the entire product development lifecycle. Testing ensures that everything works as expected, and changes should only occur when you decide. Therefore, Vitest and React Testing Library are included in our templates.

Why Vitest?

Vitest offers several advantages that make it a compelling choice for developers:

1. Speed: Built on Vite, Vitest leverages its fast bundling and hot module replacement capabilities, resulting in quick test runs and instant feedback during development.

2. Compatibility: Vitest is designed to be compatible with Jest, allowing developers to easily migrate existing tests without significant changes to their codebase.

3. TypeScript Support: With first-class TypeScript support, Vitest enables developers to write type-safe tests, reducing runtime errors and improving code quality.

4. Rich Features: Vitest comes with a variety of built-in features such as mocking, snapshot testing, and code coverage, providing a comprehensive testing solution out of the box.

5. Modern Syntax: The framework supports modern JavaScript and TypeScript syntax, making it easier for developers to write clean and maintainable tests.

6. Community and Ecosystem: As part of the Vite ecosystem, Vitest benefits from a growing community and a wealth of plugins and integrations, enhancing its functionality and ease of use.

By choosing Vitest, developers can enjoy a powerful, efficient, and modern testing experience that aligns with contemporary development practices.

Simple Test

In this example, we will write a very simple test in order to verify output from a function:

Tests For Components

If you want to make sure that a specific component or element is displayed correctly in DOM, you can use below way by using React Testing Libirary. For intance, you have a Title component to display a simple heading:

Then, you can write a test to make sure it appear in DOM:

Official Documents

For furthur information or instructions, please visit React Testing Library and Vitest’s official websites:

1. Vitest: vitest.dev
2. React Testing Library Github: github.com/testing-library/react-testing-library