Configuring jsdom in Jest across multiple tests without using modules

问题

I want to test scripts in an environment where we can not export modules. I have installed Jest version 23.1.0 and there aren't other packages in my package.json file. Using jsdom 'old' api I have come up with a solution that works as expected:

script.js

var exVar = "test";

script.test.js

const jsdom = require('jsdom/lib/old-api.js');

test('old jsdom api config', function(done) {
    jsdom.env({
        html: "<html><body></body></html>",
        scripts: [__dirname + "/script.js"],
        done: function (err, window) {
            expect(window.exVar).toBe("test");
            done();
        }
    });
});

However with this implementation I have to re-write the config for every test, because it looks like the jsdom config gets re-written every time.

What I have tried

So far I have tried running this configuration:

const jsdom = require('jsdom/lib/old-api.js');
jsdom.env({
    html: "<html><body></body></html>",
    scripts: [__dirname + "/script.js"],
    done: function (err, window) {
        console.log('end');
    }
});

with this test:

test('old jsdom api config', function(done) {
   expect(window.exVar).toBe("test");
   done();
});

in different ways: inside beforeAll, inside a script linked through setupFiles or through setupTestFrameworkScriptFile in the Jest configuration object, but still nothing works.

Maybe I could extend jest-environment as suggested in the docs, but I have no idea of the syntax I should be using, nor of how to link this file to the tests.

回答1:

Thanks to my co-worker Andrea Talon I have found a way of using the same setup for different tests (at least inside the same file) using the 'Standard API' (not the 'old API').

Here is the complete test file.

const {JSDOM} = require("jsdom")
const fs = require("fs")

// file to test
const srcFile = fs.readFileSync("script.js", { encoding: "utf-8" })

// the window
let window

describe('script.js test', () => {
  beforeAll((done) => {
    window = new JSDOM(``, {
      runScripts: "dangerously"
    }).window

    const scriptEl = window.document.createElement("script")
    scriptEl.textContent = srcFile
    window.document.body.appendChild(scriptEl)
    done()
  })

  test('variable is correctly working', (done) => {
    expect(window.exVar).toBe("test");
    done()
  })

})

Additional setup

In order to load multiple scripts I have created this function which accepts an array of scripts:

function loadExternalScripts (window, srcArray) {
  srcArray.forEach(src => {
    const scriptEl = window.document.createElement("script")
    scriptEl.textContent = src
    window.document.body.appendChild(scriptEl)
  });
}

So instead of appending every single script to the window variable I can load them by declaring them at the top of the file like this:

// files to test
const jQueryFile = fs.readFileSync("jquery.js", { encoding: "utf-8" })
const srcFile = fs.readFileSync("lib.js", { encoding: "utf-8" })

and then inside the beforeAll function I can load them altogether like this:

loadExternalScripts(window, [jQueryFile, srcFile])

来源：https://stackoverflow.com/questions/51039033/configuring-jsdom-in-jest-across-multiple-tests-without-using-modules

标签

javascript

node.js

jestjs

jsdom