Testing With Vitest

Testing with Vitest

Quick Start

// vitest.config.ts
import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: ["./tests/setup.ts"],
    coverage: {
      provider: "v8",
      reporter: ["text", "html"],
      thresholds: { global: { branches: 80, functions: 80, lines: 80 } },
    },
  },
});

// tests/setup.ts
import { afterEach, vi } from "vitest";
import { cleanup } from "@testing-library/vue";
import "@testing-library/jest-dom/vitest";

afterEach(() => { vi.clearAllMocks(); cleanup(); });

Features

Common Patterns

Unit Testing with Parametrization

import { describe, it, expect, test } from "vitest";

describe("String Utils", () => {
  test.each([
    ["hello", 3, "hel..."],
    ["hi", 10, "hi"],
    ["test", 4, "test"],
  ])('truncate("%s", %d) returns "%s"', (str, len, expected) => {
    expect(truncate(str, len)).toBe(expected);
  });
});

Mocking Modules and Services

import { describe, it, expect, vi, beforeEach, Mock } from "vitest";
import { UserService } from "@/services/user";
import { apiClient } from "@/lib/api";

vi.mock("@/lib/api", () => ({
  apiClient: { get: vi.fn(), post: vi.fn() },
}));

describe("UserService", () => {
  beforeEach(() => vi.clearAllMocks());

  it("fetches user from API", async () => {
    const mockUser = { id: "1", name: "John" };
    (apiClient.get as Mock).mockResolvedValue({ data: mockUser });

    const user = await new UserService().getUser("1");

    expect(apiClient.get).toHaveBeenCalledWith("/users/1");
    expect(user).toEqual(mockUser);
  });
});

Vue Component Testing

import { describe, it, expect, vi } from "vitest";
import { mount } from "@vue/test-utils";
import Button from "@/components/Button.vue";

describe("Button", () => {
  it("emits click event", async () => {
    const wrapper = mount(Button, { slots: { default: "Click" } });
    await wrapper.trigger("click");
    expect(wrapper.emitted("click")).toHaveLength(1);
  });

  it("is disabled when loading", () => {
    const wrapper = mount(Button, { props: { loading: true } });
    expect(wrapper.attributes("disabled")).toBeDefined();
  });
});

Testing Async Operations with Timers

import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";

describe("Debounce", () => {
  beforeEach(() => vi.useFakeTimers());
  afterEach(() => vi.useRealTimers());

  it("delays function execution", () => {
    const fn = vi.fn();
    const debouncedFn = debounce(fn, 100);

    debouncedFn();
    expect(fn).not.toHaveBeenCalled();

    vi.advanceTimersByTime(100);
    expect(fn).toHaveBeenCalledTimes(1);
  });
});

Best Practices

References

• Vitest Documentation
• Vue Test Utils
• Testing Library
• Vitest Coverage

Converted and distributed by TomeVault — claim your Tome and manage your conversions.