Jest 和 TypeScript

TypeScript 配置选项

Jest 完全兼容 TypeScript 项目，但在此环境中存在一些需要注意的细节。我们有两种方式来配置 Jest 与 TypeScript 的集成：babel 和 ts-jest。除非项目在测试环境已使用 babel 配置，否则我们认为 ts-jest 是更直接的选择。

ts-jest

该包可在我们首选的包管理器中获取，是 Jest 的 TypeScript 处理器。我们只需将测试文件扩展名从 .test.js 改为 .test.ts，并调整部分 Jest 配置即可。首先，告知 Jest 我们将使用 .ts（以及可能需要的其他 TypeScript 扩展名，如 .tsx）作为模块文件类型。可以通过更新 moduleFileExtensions 字段来实现：

1{
2  moduleFileExtensions: ['js', 'ts']
3}

此外，任何通过路径或正则表达式指向 JavaScript 文件的配置也需考虑 TypeScript 文件的存在。例如，若已有如下代码：

1{
2  collectCoverageFrom: ['src/*.(js | jsx)']
3}

则需修改为：

1{
2  collectCoverageFrom: ['src/*.(js | jsx | ts | tsx)']
3}

同时，还需告诉 Jest 使用 ts-jest 来处理 TypeScript 文件。为此，在 transform 字段中添加一个键值对，其中键为预期的 TypeScript 文件扩展名，值为包名称：

1{
2  transform: {
3    '\\.(ts|tsx)$': 'ts-jest'
4  }
5}

babel-jest

如果项目中已经使用了 Babel 配置（或希望引入），可以使用它来支持 TypeScript。

Jest 的 Babel 配置需要以下几个依赖包：

• babel-jest
• @babel/core
• @babel/preset-env

可通过 yarn add --dev babel-jest @babel/core @babel/preset-env 安装。

安装完成后，需在项目中配置 Babel，可通过 package.json 文件或单独的 babel.config.js 文件完成：

为启用 TypeScript 支持，还需额外安装一个包：yarn add --dev @babel/preset-typescript，并将其加入配置中：

@types/jest

除了配置 Jest 以支持 TypeScript 代码外，能够在测试环境中使用类型信息也非常有帮助。虽然 Jest 本身不提供 TypeScript 类型定义，但它提供了完善的 Definitely Typed 包，可通过安装 @types/jest 获得。

安装此包后，可以直接使用 Jest 的类型定义，这在确保匹配器正确使用、编写有效模拟（mock）时非常有用。利用泛型功能尤其有益，因为它能让我们更轻松地编写代码库的模拟。同时，也能基于类型信息进行断言测试，例如使用 typeof 等操作。