logo科技微讯

使用 jest 测试 Typescript 写的 React 应用

作者:科技微讯
日期:2022-11-16
📝 笔记

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

jest 默认使用的 transformer 是 babel-jest,事实上,如果你的项目根目录有 babel 配置文件,安装 jest 会同时自动安装 babel-jestbabel-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,例如 toBeDisabledtoHaveClass 等,这些 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

donation赞赏
thumbsup0
thumbsdown0
暂无评论