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

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. 实战演练：写下你的第一个测试

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

操作动作：

1. 在根目录新建src文件夹。

2. 在src下新建index.ts（这里放我们的源代码）。

3. 在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。

这意味着：

1. TypeScript 编译成功。

2. Vitest 运行成功。

3. 你的代码逻辑通过了测试。

🧠 核心知识点总结 (Review)

1. Vitest: 我们选用的测试框架。它的特点是快，且对 ESM (import/export) 支持极好。

2. .spec.ts: 这是测试文件的约定俗成命名，Vitest 会自动扫描所有带.spec或.test的文件并运行。

3. TDD 流程:

   • 以后做每一个功能（比如reactive），我们都会先写.spec.ts。

   • 运行测试 -> 报错 (Red)。

   • 去写代码实现逻辑。

   • 再次运行 -> 通过 (Green)。

   • 重构代码 (Refactor)。

✅ 你的今日任务

1. 动手操作：完全按照上面的步骤，在你的本地建立一个mini-vue文件夹。

2. 跑通测试：确保执行npm run test后能看到绿色的通过提示。

3. 准备就绪：建立src/reactivity文件夹，我们明天要在这里写下 Vue 3 的第一行核心代码。