skip to content
Logo
Yurikago Blog
Table of Contents

jest-puppeteerを利用したE2EテストのテストケースをTypeScriptで記述する方法を調べました。

検証環境

"@types/jest": "^26.0.20",
"@types/puppeteer": "^5.4.2",
"jest": "^26.6.3",
"jest-puppeteer": "^4.4.0",
"puppeteer": "^5.5.0",
"ts-jest": "^26.4.4",
"typescript": "^4.1.3"

検証リポジトリ: https://github.com/cuavv/sandbox-jest-puppeteer

Jestの設定ファイルを作成

  1. presetを指定してPuppeteerを使ってテストを実行するために必要な設定を読み込む。
  2. transformを指定してtsをjsにコンパイルする。
jest.config.js
module.exports = {
  preset: 'jest-puppeteer',
  transform: {
    '^.+\\.ts$': 'ts-jest',
  },
}

TypeScriptの設定ファイルを作成

  1. npx tsc -init を実行して設定ファイルの雛形を作成する。
  2. typesを追記してコンパイラが型定義を認識できるようにする。
tsconfig.json
"types": ["@types/jest", "@types/puppeteer"],

テストケースを作成

  1. Googleトップページに遷移する。
  2. セレクタのtextContentを取得して値が「Googleについて」であればテスト成功。

※jest-puppeteerにより page と browser がグローバル変数として宣言されています。

__tests__/selector.ts
describe('Selector', () => {
  beforeAll(async () => {
    await page.goto('https://www.google.co.jp')
  })


  test('OK', async () => {
    const selector = '#hptl > a:nth-child(1)'
    const data = await page.$eval(selector, (item) => {
      return item.textContent
    })
    expect(data).toMatch('Googleについて')
  })
})

テストを実行

package.json
"scripts": {
  "test": "jest"
},
Terminal window
% yarn test

テストの結果

この状態でjestを実行してもテストは失敗します。原因はグローバル変数 page の定義をTypeScriptのコンパイラが見つけられないためです。対応としてアンビエント宣言を使用してpageの定義をコンパイラが認識できるようにします。

jest_error

型定義ファイルの作成

名前空間global以下にアンビエント変数を宣言する。

global.d.ts
import { Browser, Page } from 'puppeteer'


declare global {
  var browser: Browser
  var page: Page
}

參考: https://dev.classmethod.jp/articles/typings-of-window-object/

テストを再び実行

今回は成功しました。

jest_success