Jest + puppeteer 自动测试

完整项目

https://github.com/OldDream/copy-to-clipbord-ultralight

为何需要做

做了一个 js小工具发布到 npm 上，每次更新完都要手动测试，效率很低，有时甚至会忘记，万一把带bug的版本发布上去，那就坑人了。因此考虑引入自动测试，搭配GitHub + Travis CI, 能省心不少。

选取我相对熟悉的 jest，但在这里和传统的js单测不同，因为这个工具涉及到dom操作，如果使用jest自带的模拟jsdom，意义不大，因此又引入了 puppeteer，跑一个无头浏览器，在其中进行测试，因此又引入 local-web-server，在本地开启http服务。

安装相关依赖

npm i jest jest-dev-server jest-puppeteer local-web-server puppeteer regenerator-runtime  --save-dev 

配置测试程序

配置 jest 环境，兼容async / await

在根目录创建以下这个文件（其实也可以不在根目录，和后面配置对应就行）

// setupTests.js
import 'regenerator-runtime/runtime';

package.json 中添加jest相关配置

// package.json
"jest": {
   
    "setupFilesAfterEnv": [
      "./setupTests.js"
    ]
  },

配置 local-web-server

scripts 中添加一行即可，使用 npm run server 可启动。

// package.json
"scripts": {
   
    "server": "ws -p 3000 --static.index demo.html",
  },

连接 local-web-server 与 jest

这里需要使用 jest-dev-server

在根目录中的 test 文件夹中创建

// globalSetup.js，用于启动本地服务
module.exports = async function globalSetup() {
   
  await setupDevServer