Zenn
🚀

【jest-puppeteer】runInBandオプションで複数のテストファイルを逐次処理（順番に処理）させる

2022/09/18に公開
Vue.js
Test
Jest
Puppeteer
tech

背景

Vue.jsでのブラウザテストとしてjest-puppeteerを採用しています。

テストの実装を進めるうちにテストファイルが増えていくのですがheadless:falseで目視でブラウザテストの状況を確認しようとしたら並列処理されていて全てを確認できなかったので、どのようにすれば逐次処理（順番にテストを実行）させられるか調査しました。

解決方法

runInBandオプションをつけることで逐次処理に変更することができました。どうやらデフォルトでは並列処理でテストが実行されるようですね。

"test:local": "cross-env NODE_ENV=local node_modules/.bin/jest --runInBand",

// runInBandオプションを省略する場合は下記のようにする
"test:local": "cross-env NODE_ENV=local node_modules/.bin/jest -i",

上記のようにrunInBandオプションを指定しローカルテストを実行すると一つのファイルのテストが完了するまで他のテストファイルが立ち上がりません。

逐次処理させる理由

実は下記のようなemailを変更するテストを実行するとなぜか意図しないemail（別のテストでしか使っていないemail）が混入するケースがありました。並列でテストしたときにそれぞれのテストスイートが影響しあってしまったのでしょうか…

今回のケースのように、テストスイートを並列処理させると発生することがあるのでスムーズにテストを実施するためにもrunInBandオプションは付けた方が良いのかもしれません。実際に、こちらのオプションをつけてから下記のテストで不具合は発生しなくなりました。

test('emailを変更する', async () => {
    const changedEmail = 'test@test.com';
    // FIXME:まれに別のemail（admin@admin.com）が入る?別のテストで使うemailが混入している？
    await page.click('[data-jp="email-change-button"]');
    await page.waitForSelector('input[name=email]');
    await resetInputValue('input[name=email]');
    await page.type('input[name=email]', changedEmail);
    await page.click('[data-jp="email-excute-button"]');
    await page.reload();
    const email = await getTextContent('[data-jp="custodian-email"]');
    expect(email).toContain(changedEmail);
  });

※メールアドレスは記事用に適当なものを入れています。
※resetInputValueとgetTextContentはカスタムフックです。

参考記事

Discussion