mini-vue3：搭建基础环境集成TS+jest

mini-vue3项目环境搭建集成TS+jest

1. 创建项目：创建项目，yarn init生成package.json文件

2. 安装typescript生成ts.config.json文件

yarn add typescript --dev,将ts安装到dev环境中，执行npx tec --init生成ts.config.json

3. 创建文件目录，当前项目下创建目录结构如下：

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bbef1c9fa6cc40a48e5b45562b194956~tplv-k3u1fbpfcp-watermark.image?)

4. 配置jest环境(jest官网可查看)

• 安装：yarn add --dev jest
• babel：yarn add --dev babel-jest @babel/core @babel/preset-env
• 使用ts及安装类型定义：yarn add --dev @babel/preset-typescript @types/jest 项目根目录下创建babel.config.js，将 @babel/preset-typescript 添加到 babel.config.js 中的 presets 列表中

module.exports = {
  presets: [
    ["@babel/preset-env", { targets: { node: "current" } }],
    "@babel/preset-typescript", // 不要忘记配置ts
  ],
};

5.环境测试

// index.ts
// 如果参数类型报错，简单的办法是设置ts.config.json的"noImplicitAny": false（Enable error reporting for expressions and declarations with an implied 'any' type.）
export const add = (a, b) => {
  return a + b
}

// index.spce.ts文件
import { add } from '../index'

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

// package.json
// 添加scripts命令
 "scripts": {
    ...,
    "test": "jest"
  },

执行yarn test，如下图所示的话，那就恭喜你配置好啦