現在開発している Rails アプリにE2Eテストの導入を検討している．その方法の一つして Jest と Puppeteer の構成について検討することにしたため，学んだことをメモしていく．

いきなり Rails アプリには導入せず，まずは Jest の Getting Started を読みながら Jest と Puppeteer の使い方について学んでいく．今回はセットアップと Google.com へアクセスするテストコードを書いてみる．

「RSpec + Capybara + Headless Chrome」の構成や System Spec を導入する事例をよく聞くが...

Rails アプリの E2Eテストは「RSpec + Capybara + selenium-webdriver」の構成をよく聞く．数年前までは poltergeist を使うのを良く聞いていたが， PhantomJS の開発終了に伴い，代わりとして Headless Chrome を使うようだ．また，rspec-rails 3.7 の System Spec も注目されている．さらに Ruby(Rails) を使えるため，Active Record を利用したテストデータも簡単に作ることができる．

しかし，開発中の Rails アプリのバージョンは 5.0 系で SystemTestCase が無いため，Rails のバージョンを上げる必要がある．また minitest から RSpec に移行する必要がある*1．移行に関しては，「RSpec + Capybara + Headless Chrome」の構成も同様．

このように色々と悩んでいると， Jest と Puppeteer によるE2Eテストの導入の事例を聞いたことで，Rails アプリの gem の移行やバージョンアップの作業から切り離すことができる，また VueCLI による単一ファイルコンポーネントを導入する上でフロントエンド用の Jest などのテスティングフレームワークも導入する必要があることも思い出し，思い切って入門することにした．

※Rails アプリの gem の移行やバージョンアップは，それはそれで別途対応していく

実際に使ってみる

試した時に作ったソースコードはこちら． github.com

Jest の導入

新しいディレクトリ（フォルダ）を作成し，Jest を導入する．なおパッケージマネージャーは yarn を使用する．

yarn の初期化と Jest をインストールする．

jest-puppeteer-sample » yarn init
jest-puppeteer-sample » yarn add --dev jest

確認用のコードとテストコードを用意する．

jest-puppeteer-sample/sum.js

function sum(a, b) {
  return a + b;
}
module.exports = sum;

jest-puppeteer-sample/sum.test.js

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

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

jest-puppeteer-sample/package.json

--  }
++  },
++  "scripts": {
++    "test": "jest"
++  }

テストを実行し，以下のような結果に慣れば OK👌

jest-puppeteer-sample - [master] » yarn test sum.test.js
yarn run v1.17.3
$ jest sum.test.js
 PASS  ./sum.test.js
  ✓ adds 1 + 2 to equal 3 (4ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.744s, estimated 2s
Ran all test suites matching /sum.test.js/i.
✨  Done in 2.32s.

Puppeteer を導入

以下を読みながら進めていく．

jestjs.io

Puppeteer と jest-puppeteer をインストールする． jest-puppeteer は JestとPuppeteer を連携させるためのツールだ．

jest-puppeteer-sample » yarn add --dev puppeteer 
jest-puppeteer-sample » yarn add --dev jest-puppeteer

Google.com へアクセスし，ページタイトルに「Google」という文字列が含まれているかを確認するテストコードを追加．

jest-puppeteer-sample/e2e.spec.js

describe('Google', () => {
  beforeAll(async () => {
    await page.goto('https://google.com');
  });

  it('should be titled "Google"', async () => {
    await expect(page.title()).resolves.toMatch('Google');
  });
});

テストコードを実行．以下のような結果になれば OK👌

jest-puppeteer-sample - [master] » yarn test e2e.spec.js
yarn run v1.17.3
$ jest e2e.spec.js
 PASS  ./e2e.spec.js
  Google
    ✓ should be titled "Google" (7ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.002s, estimated 4s
Ran all test suites matching /e2e.spec.js/i.
✨  Done in 5.61s.