Beeeat’s log

Beeeat’s log

プログラミングで出くわした知識やツール、日常生活、働き方その他色々なことをメモしていくブログ

環境変数によって実行するE2Eテストを変えられるようにする

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

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

ソースコードはこちら github.com

やり方

環境変数を使いたい時はよく「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');
    });
  }
});

実行してみる

実行する時は以下のように環境変数を指定して実行する.ENVIRONMENTGOOGLEを指定したため,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.jsheadless:falseにした状態でE2Eテストを実行するとブラウザが自動で立ち上がり,目で見て確認することができる.

jest-puppeteer.config.js

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

まとめと所感

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

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