Jest + puppeteer 自动测试

完整项目

为何需要做

做了一个 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({
    command: `npm run server`,
    launchTimeout: 2000,
    port: 3000,
  })
}

// globalTeardown.js  用于停止本地服务
const { teardown: teardownDevServer } = require('jest-dev-server')

module.exports = async function globalTeardown() {
  await teardownDevServer()
  console.log("Local dev server has been stopped.");
}

在 test 文件夹中的 jest 配置文件中引入相关函数

// test.js  jest配置文件

const startServer = require('./globalSetup');
const stopServer = require('./globalTeardown');

beforeAll(async () => {
  await startServer(); // 启动本地服务
});
afterAll(async () => {
  await stopServer(); // 停止本地服务器
});

这样我们就能在 jest 测试过程中访问 http://127.0.0.1:3000 。

配置 puppeteer

继续往test.js 中添加启动 puppeteer 的代码：

// test.js  jest配置文件
const puppeteer = require('puppeteer');

let browser; // 浏览器实例
let page; // 页面实例
beforeAll(async () => {
  await startServer(); // 启动本地服务
  browser = await puppeteer.launch();
  page = await browser.newPage();
  await page.goto('http://127.0.0.1:3000');
});

afterAll(async () => {
  await browser.close(); // 关闭浏览器
  await stopServer(); // 停止本地服务器
});

再添加测试代码：

// test.js  jest配置文件

describe('Test in browser', () => {
  test('Click copy btn.', async () => {
    let alertMsg = ''; // 存储弹窗信息
    // 监听弹窗，可以是是alert、confirm、prompt任意一种
    await page.on('dialog', async (dialog) => {
      alertMsg = dialog.message(); // 获取弹框内的信息
      await dialog.dismiss(); // 关闭弹窗
    });
    await page.click('#test'); // 点击按钮
    expect(alertMsg).toBe('success !'); // 设置测试预期结果。
  }, 6000);
});

添加测试启动命令

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

// package.json
"scripts": {
    "test": "jest"
  },

配置Travis CI

根目录下创建.travis.yml

language: node_js
node_js:
    - "12"
install:
    - npm install
before_script:
    - npm run build
script:
    - npm run test

利用几个生命周期，完成安装依赖 --- 编译 --- 运行测试。

之后push到github上即可自动运行测试（当然得去Travis官网设置一下对应仓库）。