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-无法识别。请帮忙。

更新：我尝试过那样，并且警报功能未替换为模拟功能（???）

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's 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());

here is a working example

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

1 个答案: