有没有办法对 Web Notification API 进行 Jest 测试和监视？

Question

尝试测试我使用通知 API 的代码。

我认为我没有正确地嘲笑它。

global.Notification = ({
      requestPermission: jest.fn().mockImplementation(()=> {
        console.log('reached here') //never logged
        return 'denied';
      }),
      permission: 'denied',
    } as unknown) as jest.Mocked<typeof Notification>;
    
    


  test('should ask for permission from Notifications API ', async () => {
    expect(global.Notification.requestPermission).toBeCalledTimes(1); // WORKS although console.log above never worked
  });

这行得通。

但以下不是..

  test('should create a new notification ', async () => {

    // some code that eventually runs this
    new Notification("Test");

    expect(global.Notification).toBeCalledTimes(1); // TypeError: Notification is not a constructor
  });
});

Answer 1

您应该模拟 Notification 类及其静态成员。

Notification.permission 是静态属性，Notification.requestPermission() 是静态方法。

例如

describe('66631725', () => {
  const mNotification = jest.fn();
  Object.defineProperty(global, 'Notification', {
    value: mNotification,
  });

  const staticMembers = {
    requestPermission: jest.fn().mockImplementation(() => {
      console.log('reached here');
      return 'denied';
    }),
    permission: 'denied',
  };

  Object.assign(global.Notification, staticMembers);

  test('should ask for permission from Notifications API ', () => {
    new Notification('Test');
    expect(Notification).toBeCalledTimes(1);
    expect(Notification.permission).toEqual('denied');
  });

  test('should request permission', () => {
    Notification.requestPermission();
    expect(Notification.requestPermission).toBeCalledTimes(1);
  });
});

测试结果：

 PASS  examples/66631725/index.test.ts
  66631725
    ✓ should ask for permission from Notifications API  (3 ms)
    ✓ should request permission (13 ms)

  console.log
    reached here

      at Function.<anonymous> (examples/66631725/index.test.ts:9:15)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        4.284 s