在安装提示符事件之前响应测试库

Question

我有一个React组件，可以监听beforeinstallprompt事件来处理PWA应用程序的安装。它有一个这样的效果钩：

useEffect(() => {
    window.addEventListener('beforeinstallprompt', handleBeforeInstallPromptEvent);

    return () => {
      window.removeEventListener('beforeinstallprompt', handleBeforeInstallPromptEvent);
    };
  }, [handleBeforeInstallPromptEvent]);

处理程序handleBeforeInstallPromptEvent执行一些逻辑来显示一个横幅，如果还没有安装应用程序，请用户安装它。

为了测试这种行为，我创建了这个jest测试，但是它没有调用事件处理程序，因此也没有显示警报。

我是不是遗漏了什么？

it('should render install app alert if not yet installed', async () => {
    const event = createEvent('beforeinstallprompt', window, {
      userChoice: new Promise((res) => res({ outcome: 'accepted', platform: '' })),
      prompt: () => new Promise((res) => res(undefined)),
    });

    render(<InstallApp />);

    await act(async () => {
      fireEvent(window, event);
    });

    expect(screen.getByText(/Install app!/g)).toBeVisible();
  });

Answer 1

我发现了问题。describe测试块具有此设置/解压配置，以防止捕获事件。

beforeAll(() => {
  window.addEventListener = jest.fn();
  window.removeEventListener = jest.fn();
});

afterAll(() => {
  (window.addEventListener as any).mockClear();
  (window.removeEventListener as any).mockClear();
});