2.1 初始化项目

  1. # 1. 初始化项目 
  2. mkdir hidie-mini-vue
  4. cd hidie-mini-vue 
  6. pnpm init -y

2.2 集成TypeScript & Jest 测试环境

  1. # 2. 安装 jest  typescript 
  2. pnpm install  jest typescript -D
  4. # 初始化 ts
  5. tsc  --init
  7. # 3. 安装babel 把 ESM 转为 CJS
  8. # 安装babel 和 jest-babel
  9. pnpm install -D babel-jest @babel/core @babel/preset-env   
  11. # 安装 Babel支持TypeScript
  12. pnpm i -D @babel/preset-typescript   
  14. #  jest支持 TS 语法
  15. pnpm i -D @types/jest

package.json

  1. {
  2.   "scripts": {
  3.     "test": "jest"  // 使用 jest 测试环境
  4.   }
  5. }

tsconfig.json

  1. //  tsconfig.json   设置支持jest
  2. {
  3.   "lib": ["DOM","es6"],  // 引入 DOM 和 ES6
  4.   "types": ["jest"],   // 将 jest的类型声明文件 添加到编译中
  5.   "noImplicitAny": false,  // 允许在表达式和声明中不指定类型
  6. }

babel.config.js

  1. module.exports = {
  2.   presets: [
  3.     ['@babel/preset-env', {targets: {node: 'current'}}],
  4.     '@babel/preset-typescript',
  5.   ],
  6. };
  7. // 配置 babel, 让 jest 可以识别ESM,  Node-CJS 可以识别 ESM ,  并且支持 TypeScript

2.2.1 测试环境

初始化测试 

  1. # 1. 初始化文件
  2. mkdir src && cd src
  3. mkdir reactivity && cd reactivity   #  vue3 响应式核心 
  5. touch sum.ts
  7. mkdir test  && cd test  # 存放测试文件
  8. touch index.spec.ts    # xxx.spec.ts  jest 自动匹配测试文件

sum.ts

  1. // sum.ts
  2. export function sum (a: number, b:number): number {
  3.   return a+b
  4. }

index.spec.ts

  1. // index.spec.ts
  2. import { sum } from "../sum"
  4. it("sum", () => {
  5.   expect(sum(1,1)).toBe(2)
  6. })

运行测试 : pnpm test
测试通过说明 jest 集成测试环境完成 ， 测试完成后删除测试代码文件

2.3 vscode 插件

实现 mini-vue 推荐安装插件
image.png
image.png
image.png