📖

フロントエンドのテストで任意の回数だけ繰り返し処理を事前に行いたい場合のコード例

2022/03/22に公開

結論

📝 [...Array(数字)].forEach(()=>{}) で繰り返したい処理を書きます。

テストで利用したいシチュエーションの例

  • 追加ボタンを押すと入力フィールドが増えるUI
  • そのボタンで増える上限は10個で、11個でアラートが表示されることをテストしたい

コード例

describe('〇〇の入力フィールドが10個を超えた場合', () => {
  beforeEach(() => {
    [...Array(10)].forEach(async () => {
    await wrapper
    .find('[data-testid="add-input-field-button"]')
    .trigger('click');
   });
 });

 test('押下後、アラートが表示されること', async () => {
   await wrapper
   .find('[data-testid="add-input-field-button"]')
   .trigger('click');

   expect(wrapper.vm.$notify.error).toBeCalled();
  });
});

Discussion