Nuxt.js に後から E2E テスト (puppeteer, jest-puppeteer) を入れる

Nuxt.js でも E2E テストを導入したいですね。
E2E テストを書いて、既存機能の修正時にデグレないようにしましょう。

今回は E2E テストのために、Headless Chrome API の puppeteer を入れてみた記事です。

Puppeteer 導入

$ yarn add -D puppeteer jest-puppeteer

Puppeteer の設定ファイルを追加

Nuxt.js プロジェクトのルート直下に jest-puppeteer.config.js を追加

module.exports = {
  launch: {
    headless: true,
    slowMo: 250
  },
  server: {
    command: 'yarn run testServer',
    port: 3000,
    launchTimeout: 50000
  }
}

jest.e2e.config.js を追加

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

E2E テストを追加

E2E テストのファイルを作成し、最低限のテスト（トップページに文字が表示されていること）を追加します。

test/e2e/index.spec.js

describe('Index page', () => {
  let page;

  beforeAll(async () => {
    jest.setTimeout(50000)
    page = await browser.newPage()
    await page.goto('http://127.0.0.1:3000')
  });

  afterAll(async () => {
    await page.close()
  });

  it ('Display catch copy ', async () => {
    let text = await page.evaluate(() => document.body.textContent)

    await expect(text).toContain('トップページです');
  })
});

package.json にスクリプトを追加

...
"test": "jest --config jest.config.js ./test/components",
"test:e2e": "jest --config jest.e2e.config.js --runInBand ./test/e2e",
"testServer": "nuxt build && nuxt start --port 3000"

puppeteer 用に testServer スクリプトを用意します。
また、コンポーネントのテスト、E2E 用のテストそれぞれで実行するディレクトリも指定します。

Circle CI 上でテストを実行する

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:10-browsers
    steps:
      ...
      - run: yarn run test:e2e

[nodejs version]-browsers のイメージを使い、テスト実行の run を追加します。

その他参考記事

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

最後に

決済などサービスのクリティカルな動作に対して、 E2E テストを書いていきましょう！