设置JSDOM Navigator.ServiceWorker用于单位测试服务工作者

我正在寻找一种设置navigator.serviceworker的方法来测试我的服务工作者。我当前的JSDOM设置看起来像这样：

import { JSDOM } from 'jsdom';
const dom = new JSDOM('<!DOCTYPE html><html><head></head><body></body></html>');
global.window = dom.window;
global.document = dom.window.document;
Object.keys(global.window).forEach(property => {
  if (typeof global[property] === 'undefined') {
    global[property] = global.window[property];
  }
});
global.navigator = {
  userAgent: 'node.js'
};

我已经尝试为global.navigator = global.window.navigator评论global.navigator = ...。但是，以下console.log(global.navigator.serviceWorker)和console.log(navigator.serviceWorker)都在我的单元测试中返回undefined：

describe('Service Worker', () => {
  it('should register a service worker and cache files on install', () => {
    console.log(navigator.serviceWorker); // undefined
    // navigator.serviceWorker.register() // not used yet since undefined
  });
});

使用Object.defineProperty方法创建新的serviceWorker属性：

Object.defineProperty(global.navigator, 'serviceWorker', {
  value: {
    register: jest.fn() // Choose your favourite mocking library
  }
});

将register方法定义为模拟功能，将允许您监视对该功能的呼叫，并返回可以解决或拒绝的承诺。

import sw from './service-worker';
describe('Service worker registration', () => {
  it('call navigator.serviceWorker.register with the right URL', () => {
    expect(navigator.serviceWorker.register).toHaveBeenCalledWith('/service-worker.js');
  });
});

相关内容

最新更新

热门标签：