为单元测试服务工作者设置 JSDOM navigator.serviceWorker答案

【问题标题】：Setting up JSDOM navigator.serviceWorker for unit testing service workers为单元测试服务工作者设置 JSDOM navigator.serviceWorker
【发布时间】：2017-05-27 22:22:05
【问题描述】：

我正在寻找一种方法来设置 navigator.serviceWorker 以对我的 service worker 进行单元测试。我当前的 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.navigator = global.window.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
  });
});

【问题讨论】：

标签： javascript unit-testing mocha.js service-worker jsdom

【解决方案1】：

使用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');
  });
});

【讨论】：