前端单测 jest 运行环境 - electron

⚠️ 11.11 注：@jest-runner/electron 并不支持 jest vscode Debug 调试模式，建议只部分单测用这个环境。

Jest 是个非常不错的 JS 单测工具，Jest 集成了 JSDOM 作为它的默认运行环境，即在 Node.js 运行时里面模拟浏览器 document 等 DOM api，但限于 JSDOM 本身能力一些限制，很多浏览器 api 并没有提供（比如： 之前博客提到的 canvas，localstorage，fetch 等等），如果不需要模拟直接提供真实的浏览器环境用来测试岂不是完全就没有此类烦恼了？不错，很多人都想到了这个点子，具体技术主要是用 Electron.js 来实现和控制浏览器环境（不知道什么是 Electron.js ？简单的说就是用前端熟悉的 Web 技术栈构建跨平台的桌面应用）。现有社区也有很多轮子可以用，

jest-electron

一开始使用的是蚂蚁金服出品的 jest-electron，下面引用作者一段文章：

相关轮子

jest-runner/electron

抄了一些代码，但是问题：

• 无法保持窗口调试
• 运行单测慢（单 main、当 renderer）
• 代码晦涩

以上 运行单测慢（单 main、当 renderer） 不明所以，猜测是单 mian 和 单 renderer 进程的意思？很明显作者是借鉴了 Facebook 出品的 jest-runner/electron，而又鉴于代码晦涩难懂，所以作者造了个类似轮子。www

在我的 TypeScript 工程中使用这个 jest-electron 轮子，直接就运行不出结果，按作者说明打开 Debug 模式也没有有效 Debug 信息输出，看来这个轮子并没有很好的适配 TypeScript 生态。╮(╯▽╰)╭

上面作者对 Facebook 轮子 jest-runner/electron 的吐槽反倒让我想试下能不能适配 TypeScript 项目。

jest-runner/electron

按照文档说明，配置浏览器环境（即 testEnvironment 使用 electron renderer 进程），所有测试用例一次通过，一气呵成，执行速度也比想象中的快，而且作者还贴心的提示一般不需要浏览器环境的测试用例可以使用这个轮子的 electron main 进程（即 node 环境 + electronjs api）执行，可以提升接近2倍的运行速度，顺便还学习了下 jest 配置多工程的办法。😃

简单使用步骤

安装依赖

shell
复制 
1npm i -D @jest-runner/electron

配置 jest

单环境

js
复制 
1// jest.config.js
2{
3  // ...
4  runner: '@jest-runner/electron',
5  testEnvironment: '@jest-runner/electron/environment',
6}

多环境

js
复制 
1// jest.config.js
2const common = require('./jest.common.config')
3
4module.exports = {
5  projects: [
6    {
7      ...common,
8      runner: '@jest-runner/electron/main',
9      testEnvironment: 'node',
10      // 指定 node 环境匹配的测试用例
11      testMatch: ['**/__node-tests__/**/*.(spec|test).ts']
12    },
13    {
14      ...common,
15      runner: '@jest-runner/electron',
16      testEnvironment: '@jest-runner/electron/environment',
17      // 指定浏览器环境匹配的测试用例
18      testMatch: ['**/__tests__/**/*.(spec|test).tsx']
19    }
20  ]
21}

问题

✅ 如果你遇到了这个配置在 GitHub Actions/circleci 等服务跑不通过的问题，请参考使用 Electron 时 GitHub Actions 执行失败

🚧 @jest-runner/electron 并不支持 jest vscode Debug 调试模式，建议只部分单测用这个框架。 check