引き続き Jest × Puppeteer でのE2Eテストのキャッチアップをしている．進めていくうちに，本番環境の他にステージング環境や検証環境に対してもE2Eテストを実行できるようにしたくなってきた．

そのため，今回は環境変数によって実行するE2Eテストが変えられるようにする方法を調べたのでまとめておく．

やり方

環境変数を使いたい時はよく「dotenv」というnpmライブラリが登場するが，今回はE2Eテストを実行時に環境変数を指定し，特定のE2Eテストを実行できるようにした． www.npmjs.com

今回の記事用に本番環境やステージング環境が用意できなかったため，あくまでENVIRONMENTという環境変数の内容によって実行するE2Eテストが変わるように書いてみた．process.envを使って環境変数の内容を確認し，if文で実行するE2Eテスト変えるようにしている．

e2e-env.spec.js

describe('環境変数別にページが遷移するか', () => {
  if (process.env.ENVIRONMENT == 'GOOGLE') {
    beforeAll(async () => {
      await page.goto('https://www.google.co.jp/');
    });
    it('should be titled "Google"', async () => {
      await expect(page.title()).resolves.toMatch('Google');
    });
  } else if (process.env.ENVIRONMENT == 'YAHOO') {
    beforeAll(async () => {
      await page.goto('https://www.yahoo.co.jp/');
    });
    it('should be titled "Yahoo! Japan"', async () => {
      await expect(page.title()).resolves.toMatch('Yahoo! JAPAN');
    });
  } else {
    beforeAll(async () => {
      await page.goto('https://www.bing.com/');
    });
    it('should be titled "Bing"', async () => {
      await expect(page.title()).resolves.toMatch('Bing');
    });
  }
});

実行してみる

実行する時は以下のように環境変数を指定して実行する．ENVIRONMENTにGOOGLEを指定したため，Google のトップページに遷移するE2Eテストを実行してみた．

$ ENVIRONMENT=GOOGLE npx jest ./e2e-env.spec.js
 PASS  ./e2e-env.spec.js
  環境変数別にページが遷移するか
    ✓ should be titled "Google" (8ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.476s, estimated 3s
Ran all test suites matching /.\/e2e-env.spec.js/i.

もし，本当にアクセスされているのかを見たい場合はjest-puppeteer.config.jsのheadless:をfalseにした状態でE2Eテストを実行するとブラウザが自動で立ち上がり，目で見て確認することができる．

jest-puppeteer.config.js

module.exports = {
  launch: {
--    headless: false,
++    headless: true,
  },
};

まとめと所感

環境変数によって実行するE2Eテストが変えられるようにしてみた．過去に RSpec × Capybara で似たようなことをやったので Jest × Puppeteer でも実現できて良かった．検証時は意味もなく「dotenv」をインストールしたり，.envを作成してしまっていたが，結果的に新たなライブラリをインストールせずに実現できた．

今後はif文の部分を Rails の部分テンプレートのように共通化し，これから書くE2Eテストで呼び出すような使い方をしていこうと考えている．