mini-vue3【一】：初始化项目基于Vue3的mini版本 1、初始化项目 2、配置jest 修改 tsconfig

基于Vue3的mini版本

npm init -y
npm i typescript -D
npx tsc --init # 执行这段后可以看到根目录生成了一个 tsconfig.json 文件
npm i jest @types/jest -D

修改 tsconfig.json 文件，打开 "types"，加上 "jest"

"types": ["jest"],

当前目录结构如下：

添加文件 src\reactivity\tests\index.spec.ts

it('init', () => {
  expect(true).toBe(true);
})

此时没有报错，就OK了

修改 package.json

"scripts": {
  "test": "jest"
},

控制台执行 npm run test 即可看到测试通过了。

修改文件：src\reactivity\index.ts

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

修改测试文件：src\reactivity\tests\index.spec.ts

此时 import 导入使用的是 esm 模块

import { add } from "../index";

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

接下来执行命令：npm run test

会发现报错了，报错的原因是因为 jest 运行的环境是 nodejs 环境，而 nodejs 环境是 commonjs 规范，我们上述代码使用的是 esm 规范。需要进行处理一下（使用 babel 将测试代码转换一下）。

安装依赖

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

配置babel

babel.config.js

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

执行npm run test，可以看到测试通过了