jest-electron：在 electron 环境中运行单测

[50vip]

开源项目地址： https://github.com/hustcc/jest-electron

技术解读： https://www.yuque.com/open/projects/jest-electron

我们在开发前端模块，对它进行单测的时候，经常会遇到一些测试环境不存在的问题，比如我需要测试第一个图表库，那么需要测试环境具备 dom、canvas 环境。Jest 默认的 jsdom 只是 mock 浏览器 dom 环境，无法真正执行，预览，调试。

jest-electron 就是用来在 electron 真实的浏览器环境中运行单测。

使用方式如下：

安装

npm i --save-dev jest-electron

配置 jest

在 jest 配置中，增加：

{
  "jest": {
+    "runner": "jest-electron/runner",
+    "testEnvironment": "jest-electron/environment"
  }
}

配置 ci

在 travis.yml 文件中，修改：

language: node_js
node_js:
  - "8"
  - "9"
  - "10"
  - "11"
  - "12"
+ addons:
+   apt:
+     packages:
+       - xvfb
+ install:
+   - export DISPLAY=':99.0'
+   - Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
+   - npm install
script:
  - npm run test

主要是增加 electron 的运行环境。

调试

DEBUG_MODE=1 jest

增加 DEBUG_MODE 的运行环境变量，就可以保持出 electron 的浏览器窗口，并且可以刷新重新运行测试。

[rabbbit]

不支持 jest 23?

[50vip]

@rabbbit 不支持，jest runner 的代码在 24 之后，差别太大了。