HYN慢慢琢磨一些技术。。。
首页/文章列表/Jest + puppeteer 自动测试/
Jest + puppeteer 自动测试
2020-10-25 04:56:45 Web 91人阅读

完整项目

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({
    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官网设置一下对应仓库)。

前端~
文章目录
完整项目
为何需要做
安装相关依赖
配置测试程序
配置 jest 环境,兼容async / await
配置 local-web-server
连接 local-web-server 与 jest
配置 puppeteer
添加测试启动命令
配置Travis CI