如何使用 Jest + Puppeteer 測試顯示的警報？

Question

我需要驗證單擊按鈕后是否顯示警報。

我嘗試了以下方法：

  it('should display an alert when the user tries to add empty value', () => {
    jest.setTimeout(100000);
    page.alert = jest.fn(text => text);
    const addButtonSelector = '#root > div > div > div.ToDoInput > button';
    expect(page).toClick(addButtonSelector);
    expect(page.alert).toHaveBeenCalledWith('Please enter a todo!');
  })

但是測試失敗，對 page.alert 的調用為零（實際上，在這種情況下單擊此按鈕后會顯示警報）。 我也試過 window.alert - 它無法識別。 請幫忙。

更新：我試過這樣，警報 function 不會被模擬 function 取代（？？？）

it('should display an alert when the user tries to add empty value', async() => {
    jest.setTimeout(50000);
    const dialogHandler = jest.fn();
    page.on('dialog', dialogHandler);
    const addButtonSelector = '#root > div > div > div.ToDoInput > button';
    await expect(page).toClick(addButtonSelector);
    await expect(dialogHandler).toHaveBeenCalled();
    const [firstCall] = dialogHandler.mock.calls;
    const [dialog] = firstCall;
    expect(dialog.message()).toEqual('Please enter a todo!');
  })

Answer 1

看看Pupeteer 的 Dialog 。 您可以在顯示 Dialog 后設置事件處理程序，如果您通過jest.fn()您可以引用已調用它的對話框

例如：

describe('page with dialog', () => {
  const dialogHandler = jest.fn(dialog => dialog.dismiss());
  beforeAll(() => {
    page.on('dialog', dialogHandler);
  });

  describe('when the ToDoInput button is clicked', () => {
    beforeAll(async () => {
      await page.click('#root > div > div > div.ToDoInput > button');
    });

    it('should display a dialog', () => {
      expect(dialogHandler).toHaveBeenCalled();
    });

    it('should have message "Please enter a todo!"', () => {
      const [firstCall] = dialogHandler.mock.calls;
      const [dialog] = firstCall;
      expect(dialog.message()).toEqual('Please enter a todo!');
    });
  });
});

---

編輯：在對其進行測試之后，唯一不起作用的是測試腳本變得空閑，直到對話框被接受或關閉，並且在更改dialogHandler以關閉對話框后，它可以完美地工作：

const dialogHandler = jest.fn(dialog => dialog.dismiss());

這是一個工作示例