当前位置：首页 > news >正文

专题一：搭建测试驱动环境 (TypeScript + Vitest)

news 2026/7/1 12:22:14

1. 项目初始化

我们不使用复杂的 Monorepo（pnpm workspace）配置，为了降低学习门槛，我们采用单仓库多模块的结构，重点放在逻辑实现上。

目标结构预览：

Plaintext

mini-vue/ ├── src/ │ ├── reactivity/ <-- 第一阶段的主战场 │ │ ├── index.ts │ │ └── tests/ <-- 测试文件都在这里 │ └── shared/ <-- 公共工具库 ├── package.json ├── tsconfig.json └── vitest.config.ts <-- 测试配置文件

第一步：创建文件夹并初始化打开你的终端（Terminal），执行以下命令：

Bash

# 1. 创建目录 mkdir mini-vue cd mini-vue # 2. 初始化 package.json (全部默认) npm init -y # 3. 安装 TypeScript # -D 表示安装为开发依赖 (devDependencies) npm install typescript -D # 4. 初始化 TS 配置 npx tsc --init

2. 安装测试神器 —— Vitest

Vue 3 官方以前用 Jest，但现在全面转向了Vitest。 Vitest 基于 Vite，速度极快，开箱即用，而且对 TypeScript 支持极好，不需要像 Jest 那样配一堆 Babel 转换器。

第二步：安装 Vitest

Bash

npm install vitest -D

3. 配置文件详解

我们需要修改两个配置文件，确保 TS 和 Vitest 能配合默契。

第三步：配置tsconfig.json找到根目录下的tsconfig.json，把里面的内容替换为以下配置。这一步是为了确保我们能使用最新的 ES6 语法，并且允许引入模块。

JSON

{ "compilerOptions": { "target": "esnext", "module": "esnext", "moduleResolution": "node", "strict": true, "jsx": "preserve", "sourceMap": true, "resolveJsonModule": true, "esModuleInterop": true, "lib": ["esnext", "dom"], "types": ["vitest/globals"] } }

注意："types": ["vitest/globals"]允许我们在测试文件中直接使用describe,it,expect而不需要每次都 import。

第四步：配置package.json我们需要加一个脚本命令，让我们能一键跑测试。

打开package.json，在"scripts"里添加"test"：

JSON

{ "name": "mini-vue", "version": "1.0.0", "main": "index.js", "scripts": { "test": "vitest" }, "devDependencies": { "typescript": "^5.x.x", "vitest": "^1.x.x" } }

4. 实战演练：写下你的第一个测试

环境搭好了，我们来跑通流程。我们模拟一个简单的加法功能，来验证环境是否正常。

操作动作：

在根目录新建src文件夹。
在src下新建index.ts（这里放我们的源代码）。
在src下新建index.spec.ts（这里放测试代码，.spec.ts是测试文件的常见后缀）。

文件内容：

src/index.spec.ts(测试文件)

TypeScript

import { add } from "./index"; // describe 定义一个测试分组，名字叫 "init" describe("init", () => { // it 定义一个具体的测试用例 it("should add two numbers", () => { // expect 是断言：我期望 add(1, 1) 的结果是 2 expect(add(1, 1)).toBe(2); }); });

src/index.ts(源文件)

TypeScript

export function add(a: number, b: number) { return a + b; }

5. 启动引擎！

回到终端，运行：

Bash

npm run test

预期结果：你应该会看到终端里出现一片绿色的文字，显示✓ src/index.spec.ts以及Test Files 1 passed。

这意味着：

TypeScript 编译成功。
Vitest 运行成功。
你的代码逻辑通过了测试。

🧠 核心知识点总结 (Review)

Vitest: 我们选用的测试框架。它的特点是快，且对 ESM (import/export) 支持极好。
.spec.ts: 这是测试文件的约定俗成命名，Vitest 会自动扫描所有带.spec或.test的文件并运行。
TDD 流程:
- 以后做每一个功能（比如reactive），我们都会先写.spec.ts。
- 运行测试 -> 报错 (Red)。
- 去写代码实现逻辑。
- 再次运行 -> 通过 (Green)。
- 重构代码 (Refactor)。