如何監視腳本中的JavaScript函數，並將其注入jsdom以用於測試目的？

我試圖在開發Chrome擴展時測試函數。對於我的測試框架，我使用sinon（窺探，模擬和存根），mocha，chai和jsdom（創建一個執行我的Chrome擴展背景和彈出腳本的dom）。如何監視腳本中的JavaScript函數，並將其注入jsdom以用於測試目的？

但是，我似乎無法窺探腳本中的函數（background.js），我將其注入到jsdom中。

這是我在做什麼：

background.js

function searchTabs() {...} 

searchTabs(); 

module.exports.searchTabs = searchTabs;

background.test.js

var fs = require('fs'); 
var sinon = require('sinon'); 
var chrome = require('sinon-chrome'); 
var assert = require('chai').assert; 
var jsdom = require('jsdom'); 

var bg = require('background.js'); 

var window; 
var spy; 

describe('background page', function() { 

    beforeEach(function() { 
     jsdom.env({ 
      html: '<html></html>', 
      src: [ 
       fs.readFileSync('background.js', 'utf-8'), // Inject script into jsdom 
      ], 
      created: ..., 
      done: ..., 
     }); 
    }); 

    afterEach(function() { 
     chrome.reset(); 
     window.close(); 
    }); 

    it('should call searchTabs', function() { 
     spy = sinon.spy(bg.searchTabs); 

     sinon.assert.calledOnce(spy); // This is not called :(
    }); 
});

我懷疑問題有任何一個不正確的進口做/ export或注入jsdom的background.js腳本不被間諜包裝。如果有人能夠解決這個問題，我會非常感激！

來源

2017-09-18 michaeldeng

我懷疑以下可能會說明一些光：https://stackoverflow.com/questions/5605961/what-is-the-difference-between-jsdom-env-and-jsdom-jsdom – beaumontwebdev

請[編輯]問題成爲話題：包括一個[重複問題*]的[mcve]。對於Chrome擴展程序或Firefox Web擴展程序，幾乎總是需要包含* manifest.json *和一些背景，內容和/或彈出腳本/ HTML以及常用的網頁HTML /腳本。尋求調試的問題幫助（「爲什麼我的代碼不按我想要的方式工作？「）必須包括：（1）期望的行爲，（2）特定的問題或錯誤，以及（3）在問題本身中重現*所需的最短代碼*。另請參閱：[我可以在此處詢問哪些主題？]（/ help/on-topic）和[問]。 – Makyen

你需要在上下文中的NodeJS

bg = require('background.js');

和背景，然後在您的測試應用間諜了這一點。

然而，JSDOM通過fs.readFileSync獲得了自己的文件副本，並在一個沙盒中執行它，與NodeJS上下文分開 - 所以你不會在那裏應用假的。因此應用間諜功能後接到電話不會得到您預期的結果 -

除此之外，從您提供的例子來看，在加載（或需要）的background.js已經執行了searchTabs功能。

你可以做的是將實際執行的功能與JSDOM沙盒中的假貨分開。那可以看看這個：

background.js

window.searchTabs =() => { 
    // I'm searching for tabs 
}

run.js

window.searchTabs();

test.js

const fs = require('fs'); 
const chrome = require('sinon-chrome'); 
const {JSDOM} = require('jsdom'); 

const html = '<!DOCTYPE html><html><head></head><body></body></html>'; 

const dom = new JSDOM(html, { 
    runScripts: 'outside-only', 
    beforeParse(window) { 
    window.chrome = chrome; 
    } 
}); 

dom.window.eval(fs.readFileSync('background.js')); 

const spy = sinon.spy(dom.window, 'searchTabs'); 

dom.window.eval(fs.readFileSync('run.js')); 

sinon.assert.calledOnce(spy);

如果你正在尋找一種簡單的方法來根據你的manifest.json加載JSDOM中的彈出窗口或背景，那麼webextensions-jsdom也許會很有趣。

來源

2018-03-05 21:47:40 stoically

如何監視腳本中的JavaScript函數，並將其注入jsdom以用於測試目的？

回答

相關問題