如何使用 JEST 模拟通知 API？

Question

我开玩笑地测试了 redux-actions。 特定的 redux-action 使用 Notifications API 作为副作用。如何模拟通知 API？

现在，我只是这样模拟它：

global.Notification = {...};

它有效，但我认为有更优雅的解决方案来解决这个问题。有什么想法吗？

我有这个模块来处理通知 API：

export const requestNotifyPermission = () => {
    try {
        return Notification.requestPermission().then(function(result) {
            return result;
        });
    } catch(err) {
        console.warn('NotificationsAPI error: ' + err);
    }
};

export const getCurrentNotifyPermission = () => {
    // Possible values = default, granted, denied
    try {
      return Notification.permission;
    } catch {
      return 'denied';
    }
};

export const createNotify = (title, body)  => {
  try {
    if (getCurrentNotifyPermission() === 'granted') {
      var options = {
          body: body
      };
      return new Notification(title, options);  
    }
  } catch(err) {
    console.warn('NotificationsAPI error: ' + err);
  }
}

Answer 1

防止在每个测试文件中模拟 Notification API 的一种方法是配置 Jest setupFiles。

jest.config.js

module.exports = {
  setupFiles: ["<rootDir>config.ts"],
};

config.ts

globalThis.Notification = ({
  requestPermission: jest.fn(),
  permission: "granted",
} as unknown) as jest.Mocked<typeof Notification>;

注意：globalThis 是访问全局范围的最现代方式。如果您没有所需的 Node 版本 (v12+)，请坚持使用 global 对象。

这个例子也展示了 Typescript 的使用，这有点棘手。

如果你想模拟不同的权限状态，你可以在测试用例中这样做：

// Notification.permission
jest
  .spyOn(window.Notification, "permission", "get")
  .mockReturnValue("denied");


// Notification.requestPermission (which is a Promise)
jest
  .spyOn(window.Notification, "requestPermission")
  .mockResolvedValueOnce("granted");