使用 jest 测试 Typescript 写的 React 应用

jest 默认只能运行用 js 写的代码，如果代码不是当前 Node.js 版本原生支持的代码（例如 jsx、ts、高版本的 js 等），就需要先把代码转换为标准的 js。jest 是通过所谓的 transformer 进行代码转换的，我们可以在 jest 的配置文件例如 jest.config.js 中配置 transformer。

jest 默认使用的 transformer 是 babel-jest，事实上，如果你的项目根目录有 babel 配置文件，安装 jest 会同时自动安装 babel-jest。babel-jest 的作用更具体一点说，就是读取 babel 配置文件并使用 babel 把 .js、.ts、.jsx、.tsx 文件转换为当前 ndoe.js 版本支持的 js 代码。

Babel 的作用：Doing things like erasing your types and rewriting the newest ECMAScript features to work in older runtimes.

babel-jest 其实是假 babel 之手转换代码（当然它还有一些其他作用），背后的功臣还是 babel，另一个替代方案是 swc，这是 Next.js 内置的方案。

Next.js 内置了一份 jest 配置文件，该配置文件使用 swc 转换代码，开发者也可以改用 babel。改用 babel 后 Next.js 内置的 jest 配置文件将失效，需要开发者创建一份新的 jest 配置文件。Next.js 官方文档有如何使用 jest 写测试的教程。

用 jest + babel 写测试需要安装的 npm 依赖如下。

javascript 项目：

jest
babel-jest
@babel/core
@babel/preset-env：最多人用的 babel preset；

对于 typescript 项目，除了上面四个依赖，还需要安装：

@babel/preset-typescript：另一个 babel preset，babel 7 新增，微软官方开发；
@types/jest：jest 的 type，可以不安装，如果不安装就用 @jest/globals；

在 vscode 中，无论代码是不是 ts 写的，都建议安装 @types/jest，因为这样 vscode 就能自动补全 jest 的 API。

使用 jest + babel 测试 ts 代码，babel 的工作仅仅是转换代码，不会对代码进行 type checking，这意味着不符合 ts 规范的代码也会被转换，不会报错。要想 type checking 有两种方法，一种是在 babel 之外再额外运行 tsc，另一种是不用 babel 而用 ts-jest。和 babel-jest 一样，ts-jest 也是一个 jest transformer，它背后用的其实也是 tsc，即 Typescript 官方 compiler。

当测试一个 nodejs 应用时，以上就可以了，但如果测试一个 React 项目，建议再安装以下依赖，它们会让测试变得更简单。

jest-environment-jsdom：jest 原来的默认测试环境是 jsdom，但在 dom 下进行测试可能存在性能问题，于是 jest 27 把默认测试环境改为 node，jest 28 把 jest-environment-jsdom 从主包中剥离出来，官方建议在一个混合型测试环境中保持 node 默认，对于需要在 jsdom 进行测试的文件可使用 docblocks 更换环境；
@testing-library/react：用来测试 react 应用的 UI；
@testing-library/jest-dom：为 jest 增加一些额外的 jest matchers，例如 toBeDisabled、toHaveClass 等，这些 matcher 是 jest 原本没有的，都是针对 dom 的 matcher；
@testing-library/user-event：用户事件；
react-test-renderer：react-dom 有一个 render 方法，用来把一个 react element 渲染为 DOM 节点，react-test-renderer 是一个类似 render 方法的 renderer，但它是把 react component 转换为 javascript 对象，主要用在 jest 的 snapshot 测试中；

最后，jest 的配置文件如果使用 .ts 后缀，即用 typescript 写，还需要安装 ts-node。