vscode 构建基于TS以及Jest的测试环境

需求：需要个Jest + TS + 支持ESM + 支持ES6+语法

项目初始化
1.初始化package.json

yarn init -y

2.安装 Jest 和 babel
官网
安装Jest和babel

• babel：语法转换，转换为浏览器支持的语法

yarn add --dev babel-jest @babel/core @babel/preset-env

在项目的根目录下创建 babel.config.js ，通过配置 Babel 使其能够兼容当前的 Node 版本。
babel.config.js

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

3.引入TS

yarn add --dev @babel/preset-typescript

修改babel.config.js

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

npx tsc --init

配置tsconfig.json

+ "lib": ["DOM"],
+ "types": ["jest"],

4.Jest 代码提示

yarn add --dev @types/jest

在根目录添加/编辑 jsconfig.json

{
    "typeAcquisition": {
        "include": [
            "jest"
        ]
    }
}

5.修改package.json

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

6.测试搭建是否成功
新建 tests/index.ts

describe('init', () => {
    test('init', () => {
        expect(true).toBe(true)
    })
})

执行测试

yarn test

有以下输出表示搭建成功！

也可以测试ESM，这里就不多赘述了