如何使用 Jest + Puppeteer 测试显示的警报？

Question

I need to verify that after a button click an alert is displayed.

I tried the following:

  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!');
  })

But the test Fails with zero calls to the page.alert (in reality the alert is shown after the click on this button in this conditions). Also I tried window.alert - it is not recognized. Please help.

Update: I tried like that, and the alert function is not replaced with the mock 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

Take a look at Pupeteer's Dialog . You can set event handler once a Dialog is displayed and if you pass jest.fn() you can have reference to the dialog that it has been called with

eg:

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!');
    });
  });
});

---

Edit: after testing it the only thing that was not working is that the test script was becoming idle until the dialog is either accepted or dismissed and after changing the dialogHandler to dismiss the dialog made it work flawlessly:

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

here is a working example