為單元測試服務人員設置JSDOM navigator.serviceWorker

Question

我正在尋找一種設置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.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
  });
});

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

為單元測試服務人員設置JSDOM navigator.serviceWorker

問題描述

1 個解決方案

解決方案1
2 2018-02-11 10:27:46

為單元測試服務人員設置JSDOM navigator.serviceWorker

問題描述

1 個解決方案

解決方案1 2 2018-02-11 10:27:46

解決方案1
2 2018-02-11 10:27:46