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

原创已于 2022-02-20 17:04:27 修改 · 1.2k 阅读

CC 4.0 BY-SA版权

文章标签：

于 2022-02-20 16:45:57 首次发布

3 篇文章

订阅专栏

本文介绍了如何在VSCode中构建一个基于TypeScript和Jest的测试环境，包括初始化项目、安装Jest和Babel进行语法转换、引入TS、配置Jest以支持ESM和ES6+语法，以及验证测试环境是否成功搭建。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

yarn init -y

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

yarn add --dev jest
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',
  ],
};

由于 Babel 对 Typescript 的支持是通过代码转换（Transpilation）实现的，而 Jest 在运行时并不会对你的测试用例做类型检查。
如果你需要此功能，可以使用 ts-jest ，或者单独（或作为构建流程的一部分）直接运行 TypeScript 编译器 tsc 。

安装TS环境

yarn add typescript --dev
npx tsc --init

配置tsconfig.json

+ "lib": ["DOM"],
+ "types": ["jest"],
+ "noImplicitAny": false, // 允许使用any

4.Jest 代码提示

yarn add --dev @types/jest

5.修改package.json

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

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

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

执行测试

yarn test

有以下输出表示搭建成功！
在这里插入图片描述
也可以测试ESM，这里就不多赘述了