Unit Testing with Vitest: A Next-Generation Testing Framework

Why Choose Vitest?

Vitest is designed with modern development in mind. Here’s why it stands out:

Speed

Vitest leverages Vite as its foundation, utilizing its lightning-fast hot module replacement (HMR) and esbuild for bundling and transpilation. This results in:

• Smart & Instant Watch Mode: Tests are re-run only for affected files, making the feedback loop instantaneous.
• Out-of-box ESM support: Modern projects benefit from direct support for ES modules without hacks.

In performance benchmarks, Vitest consistently outpaces Jest by a significant margin due to its use of Vite’s optimized build pipeline.

Note: These benchmarks may vary depending on project complexity and system specifications.

Compatibility

Vitest is Jest-compatible, which means you can reuse much of your existing test suite with minimal changes. It also supports popular tools like TypeScript, JSX, and ESM out-of-the-box.

Developer Experience

• Integrated with Vite’s HMR for fast test iteration.
• Simple API and configuration.
• Rich ecosystem and growing community support.

---

Setting Up Vitest

Let’s dive into setting up Vitest in a TypeScript project. We'll demonstrate this using a React project, but the steps are similar for Vue 3 or Node.js projects.

Installation

1. Ensure you have Node.js and npm/yarn/pnpm installed.
2. Install Vitest and its peer dependencies:

npm install --save-dev vitest

For projects using React, you’ll also need the React testing library:

npm install --save-dev @testing-library/react @testing-library/jest-dom

Configuration

Create or update your vite.config.ts to enable Vitest:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom', // Use 'node' for Node.js projects
    setupFiles: './test/setup.ts',
  },
});

Adding Setup Files

Set up files are used to configure the testing environment. Create a test/setup.ts file:
import '@testing-library/jest-dom';

Adding Scripts

Update your package.json to include a test script:

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

---

Writing Unit Tests with Vitest

Vitest provides a Jest-like API that makes writing tests straightforward. Here’s a simple example:

Example: React Component

Imagine you have a React component:

// src/components/Greeting.tsx
import React from 'react';

type GreetingProps = {
  name: string;
};

export const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

Writing Tests

Create a test file for the component:

// src/components/__tests__/Greeting.test.tsx
import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Greeting } from '../Greeting';

describe('Greeting Component', () => {
  it('renders the correct greeting', () => {
    render(<Greeting name="Vitest" />);
    expect(screen.getByText('Hello, Vitest!')).toBeInTheDocument();
  });
});

Running Tests

Run the tests using:
npm run test

You’ll see output similar to this:
✓ Greeting Component renders the correct greeting

---

Advanced Features

Mocking

Vitest supports mocking modules and functions directly:

import { vi } from 'vitest';

const mockFn = vi.fn();
mockFn();
expect(mockFn).toHaveBeenCalled();

Snapshot Testing

Snapshot testing is as simple as:

import { render } from '@testing-library/react';
import { expect } from 'vitest';
import { Greeting } from '../Greeting';

test('matches snapshot', () => {
  const { container } = render(<Greeting name="Vitest" />);
  expect(container).toMatchSnapshot();
});

Performance Testing

Use Vitest's CLI options to measure performance:
vitest --run --coverage

---

Conclusion

Vitest is a compelling choice for modern testing, offering speed, simplicity, and rich features powered by Vite. Whether migrating from Jest or starting fresh, Vitest provides an excellent developer experience and ensures your tests run as fast as your code.

Try Vitest in your next project and experience the difference!

References

Vitest website
Vite