How to spy on javascript functions in a script that's injected into a jsdom for testing purposes?

Question

How to spy on javascript functions in a script that's injected into a jsdom for testing purposes?

1.2k Views Asked by michaeldeng At 04 April 2025 at 16:05

I'm trying to test functions while developing a chrome extension. For my testing framework, I'm using sinon (to spy, mock, and stub), mocha, chai, and jsdom (to create a dom that executes my chrome extension background and popup scripts).

However, I can't seem to be able to spy on the functions in the script (background.js) that I'm injecting into the jsdom.

This is what I'm doing:

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 :(
    });
});

I suspect the problem has to do with either an incorrect import/export or that the background.js script injected into the jsdom isn't wrapped by the spy. I'd really appreciate it if someone can shed some light on this problem!

Original Q&A

There are 1 best solutions below

**stoically** · Answer 1

You're requiring the background in the NodeJS context

bg = require('background.js');

and then in your test you apply a spy to that.

JSDOM however gets its own copy of the file through fs.readFileSync and executes it in a sandbox, separated from the NodeJS context - so you're not applying the fake there.

Besides that, judging from your provided example, the searchTabs function is already executed when you load (or require) the background.js - so applying a spy after the function got called wont get you the expected results.

What you could do instead is separating the function from the actual execution and apply fakes, inside the JSDOM sandbox, inbetween. That could look this:

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

If you're looking for an easy way to load popups or background in JSDOM based on your manifest.json then webextensions-jsdom might be interesting too.

How to spy on javascript functions in a script that's injected into a jsdom for testing purposes?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in UNIT-TESTING

Related Questions in GOOGLE-CHROME-EXTENSION

Related Questions in SINON

Related Questions in JSDOM

Trending Questions

Popular # Hahtags

Popular Questions