在不使用模块的情况下跨多个测试在 Jest 中配置 jsdom [英] Configuring jsdom in Jest across multiple tests without using modules
问题描述
我想在无法导出模块的环境中测试脚本.我已经安装了 Jest 版本 23.1.0，我的 package.json 文件中没有其他包.使用 jsdom 'old' 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 或通过 setupTestFrameworkScriptFile 链接的脚本内，在 Jest 配置对象中，但仍然没有任何作用.
in different ways: inside beforeAll, inside a script linked through setupFiles or through setupTestFrameworkScriptFile in the Jest configuration object, but still nothing works.
也许我可以按照 jest-environment>docs，但我不知道我应该使用的语法，也不知道如何将此文件链接到测试.
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').
这是完整的测试文件.
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屋！
