专题一：搭建测试驱动环境 (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. 实战演练：写下你的第一个测试

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

操作动作：

在根目录新建 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)。

✅ 你的今日任务

动手操作 ：完全按照上面的步骤，在你的本地建立一个 mini-vue 文件夹。
跑通测试 ：确保执行 npm run test 后能看到绿色的通过提示。
准备就绪 ：建立 src/reactivity 文件夹，我们明天要在这里写下 Vue 3 的第一行核心代码。