api - 如何使用 JEST 模拟通知 API？

Question

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

现在，我只是这样 mock 它:

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");