jest-puppeteerを使ったテストを試す

smooth-code/jest-puppeteer: Run your tests using Jest & Puppeteer 🎪✨

yarn add --dev jest-puppeteer puppeteer jest

jest-puppeteerはpuppeteerの設定をするだけでなく、click前に要素の出現を待機するなどインテグレーションテストのために設計されている。

使い方

jest.config.jsにpuppeteerの設定を書く

今回は試すだけなので、jest.config.jsに書くが基本的に他のテストも書くと思うので、--configを使ってjest.config.e2e.jsなどのファイルを用意するといいだろう。

module.exports = {
  preset: 'jest-puppeteer',
}

google.comを開いたときgoogleが表示されるかテスト。
ちなみに自分はdescribeを書くぐらいならテストファイルを分割する。

index.test.js

let page

beforeAll(async () => {
  page = await browser.newPage()
  await page.goto('https://google.com')
})

test('should display `google` text on page', async () => {
  await expect(page).toMatch('google')
})

Cool。テストが通った。
テストは落としてなんぼなので、gooooogleの文字があるかテスト

フォームへの入力とか、クリックとかの基本的な操作は以下にまとまっている。

jest-puppeteer/README.md at master · smooth-code/jest-puppeteer

フォームの入力やクリックの挙動を見るために、テストを追加してみる。

test('`akameco`検索し検索結果にQiitaがあること', async () => {
  await expect(page).toFill('input[title="検索"]', 'akameco')
  const navigationPromise = page.waitForNavigation() // pageの遷移を待つ
  await expect(page).toClick('input[type="submit"]')
  await navigationPromise
  await expect(page).toMatch('akameco - Qiita')
})

実行時間を見ると、1119ms。思ったより非常に高速。

なお、pageインスタンスは、puppeteerのPageなので、page.waitForNavigation()などが普通に使える。