在不使用模块的情况下跨多个测试在Jest中配置jsdom [英] Configuring jsdom in Jest across multiple tests without using modules
问题描述
我想在无法导出模块的环境中测试脚本.我已经安装了Jest版本23.1.0，并且package.json文件中没有其他软件包.
使用jsdom 旧" api 符合预期效果的解决方案:
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();
}
});
});
但是，使用此实现，我必须为每个测试重新编写配置，因为看起来jsdom配置每次都会被重写.
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.
我尝试过的事情
到目前为止，我已经尝试运行此配置:
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');
}
});
通过此测试:
test('old jsdom api config', function(done) {
expect(window.exVar).toBe("test");
done();
});
以不同的方式:在beforeAll中，在通过setupFiles或通过Jest配置对象中的setupTestFrameworkScriptFile链接的脚本中，但是仍然没有任何效果.
in different ways: inside beforeAll, inside a script linked through setupFiles or through setupTestFrameworkScriptFile in the Jest configuration object, but still nothing works.
也许我可以按照 docs 中的建议扩展jest-environment，但我不知道应该使用的语法，也不知道如何将此文件链接到测试.
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.
推荐答案
感谢我的同事 Andrea Talon 我找到了一种使用标准API"(而非旧API")对不同测试(至少在同一文件中)使用相同设置的方法.
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()
})
})
其他设置
为了加载多个脚本，我创建了此函数，该函数接受一系列脚本:
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)
});
}
因此，除了将每个脚本附加到window变量之外，我还可以通过在文件顶部声明它们来加载它们，如下所示:
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" })
，然后在beforeAll函数中，我可以像这样完全加载它们:
and then inside the beforeAll function I can load them altogether like this:
loadExternalScripts(window, [jQueryFile, srcFile])
这篇关于在不使用模块的情况下跨多个测试在Jest中配置jsdom的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
