All Resources
Tool
TestingVitestTypeScript
May 28, 2024

Vitest Unit Testing

Fast unit testing framework built on Vite with instant feedback and great DX.

Overview

Vitest is a blazingly fast unit test framework powered by Vite. It provides Jest-compatible syntax with significantly faster execution times.

Key Features

  • Lightning Fast: Shared worker threads for parallel execution
  • Jest Compatible: Use existing Jest tests with Vitest
  • Smart Reload: Hot reload during test development
  • TypeScript Support: Zero-config TypeScript support
  • Coverage Reporting: Built-in coverage analysis

Quick Start

npm install -D vitest

Write Tests

import { describe, it, expect } from 'vitest'
import { add, multiply } from './math'

describe('Math Utils', () => {
  it('should add two numbers', () => {
    expect(add(2, 3)).toBe(5)
  })

  it('should multiply two numbers', () => {
    expect(multiply(2, 3)).toBe(6)
  })
})

React Component Testing

import { render, screen } from '@testing-library/react'
import { Button } from './Button'
import { describe, it, expect, vi } from 'vitest'

describe('Button', () => {
  it('calls onClick handler', () => {
    const handleClick = vi.fn()
    render(<Button onClick={handleClick}>Click me</Button>)
    
    screen.getByRole('button').click()
    expect(handleClick).toHaveBeenCalledOnce()
  })
})

Mocking

import { vi } from 'vitest'

const mockFetch = vi.fn()
vi.stubGlobal('fetch', mockFetch)

mockFetch.mockResolvedValue({
  json: () => Promise.resolve({ id: 1 })
})

Vitest achieves 10x faster test execution compared to Jest on large test suites.

Curated by

Shyam