mcpField
N
nextjs-vitest

nextjs-vitest

github.com/tenkohTesting & quality038 installsUpdated 34w ago
Repository

About nextjs-vitest

nextjs-vitest is a setup skill for adding a Vitest testing environment to a Next.js project. It provides package installation and configuration steps, including React Testing Library and jsdom.

Key features

  1. 01Install Vitest and test packages
  2. 02Create Vitest configuration
  3. 03Configure jsdom environment
  4. 04Add Testing Library setup

Use cases

  1. 01Set up tests in a Next.js project
  2. 02Configure a jsdom-based test environment

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/tenkoh/skills --skill nextjs-vitest

After installing, type/nextjs-vitestin Claude Code to confirm it loaded.

Details

From the project README

Set up Vitest testing environment for a Next.js project.

Steps

1. Install required packages

Run the following command:

npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom vite-tsconfig-paths @testing-library/jest-dom @testing-library/user-event
2. Create vitest.config.mts

Create vitest.config.mts in the project root:

import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";
import { defineConfig } from "vitest/config";

export default defineConfig({
  plugins: [tsconfigPaths(), react()],
  test: {
    environment: "jsdom",
    globals: true,
    clearMocks: true,
    setupFiles: ["./vitest.setup.ts"],
  },
});
3. Create vitest.setup.ts

Create vitest.setup.ts in the project root:

import "@testing-library/jest-dom/vitest";
4. Verify completion

Confirm all files have been created correctly.

Comments

Markdown supported