起手式

1
2
3
4


mkdir my-mini-vue
cd my-mini-vue

npm init -y

代码未动，ut先行。

1

npm i  -D jest@27.5.1

TSC转译安装ts

1

npm i -D typescript@4.6.3

安装ts同时也要安装tsc，用其初始化TS配置。

1

npx tsc --init

安装babel-jest，因为jest本身不做转译。虽然更推荐安装 ts-jest ，比起来 ts-jest 能在运行时做类型检查，其实更科学。

1
2


npm i -D @babel/preset-env @babel/core @babel/preset-typescript babel-jest

Jest 的ts描述：

1

npm i -D @types/jest

创建babel.config.js 配置如下

1
2
3
4
5
6
7


module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }],
    '@babel/preset-typescript'
  ],
}

TDD 开发

快速编写一个可以跑起来的tdd。比如我们准备实现 reactivity功能，做具体实现前可以把架子搭起来。目录结构如下：

1
2
3
4
5
6


|--src
	|--reactivity
			|--index.ts
			|--tests
				|--index.spec.ts

代码：

1
2
3
4


//reactivity/index.ts
export function add(a,b){
	return a + b
}

1
2
3
4
5
6
7


//reactivity/tests/index.spec.ts

import {add} from '../index'

it(init,()=>{
	expect(add(1,1)).toBe(2)
})