介紹

Jest 是 React 在寫測試時常會用到的套件，這個套件官方文進也提供了 Puppeteer 使用方法 ，這一篇來看看Puppeteer是如何在 Jest上寫測試的

安裝套件

yarn init
yarn add puppeteer jest

在package.json加上測試的script

"scripts": {
  "test": "jest"
}

在jest 的 describe是來定義這個一連串要測試的名稱，beforeEach 是在每次測試之前為了確保環境乾淨所以都會起一個新的無頭模式的browser,afterEach 則是在測試之後關閉 瀏覽器 ， test 則是要執行要測試的作動名稱
這邊會去抓到 title並且期望值是線上讀書會

const puppeteer = require('puppeteer');

describe('打開 線上讀書會網站', () => {
  var browser, page;
  var url = 'https://17book.me'
beforeEach (async () => {
    browser = await puppeteer.launch({ headless: false });
    page = await browser.newPage();
  })
afterEach (() => {
    browser.close()
  })

test('Title == 線上讀書會', async () => {
    await page.goto(url);
    const title = await page.title();
    expect(title).toBe("線上讀書會");
  });
 
})

總結

Puppeteer的 e2e 測試， 搭上使用 Jest 一個範例可以看出程式碼很簡潔， Jest 官方也有介紹如何使用 Puppeteer 連結在下方可以參考

https://facebook.github.io/jest/docs/en/puppeteer.html