mcpField
N
nextjs-vitest

nextjs-vitest

github.com/tenkoh测试与质量038 次安装34 周前更新
代码仓库

关于 nextjs-vitest

nextjs-vitest 是为 Next.js 项目配置 Vitest 测试环境的技能，涵盖依赖安装、配置文件及 React Testing Library 和 jsdom 的设置。

主要功能

  1. 01安装 Vitest 和测试依赖
  2. 02创建 Vitest 配置
  3. 03配置 jsdom 环境
  4. 04添加 Testing Library 设置

适用场景

  1. 01为 Next.js 项目配置测试
  2. 02设置基于 jsdom 的测试环境

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/nextjs-vitest确认已加载。

详细介绍

为 Next.js 项目设置 Vitest 测试环境。

步骤

1. 安装所需软件包

运行以下命令：

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. 创建 vitest.config.mts

在项目根目录中创建 vitest.config.mts：

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. 创建 vitest.setup.ts

在项目根目录中创建 vitest.setup.ts：

import "@testing-library/jest-dom/vitest";
4. 验证是否完成

确认所有文件均已正确创建。

评论

支持 Markdown