我们有通过<script>标签引入的自定义资产，这些标签可以查找html标签并呈现组件。例如，我们有<customABC />。当页面加载时，脚本找到<customABC />并返回该组件应该是什么。
在调用render之前，我正试图通过以下方式将脚本添加到我的文档中。
describe('DisclaimerContainer render tests', () => {
test('simple Disclaimer renders disclaimer content', () => {
const moduleScript = document.createElement('script');
moduleScript.src = "https://www.example.com/assets/foo/bar/5.7.0/components.js";
moduleScript.type = "module";
moduleScript.async = true;
document.body.appendChild(moduleScript); //I've also tried document.head.appendChild(moduleScript);
const {debug} = render(<ContextDisclaimerContainer history={history}/>);
debug();
});
Debug((仍然显示<customABC />，而不是它应该显示的html。
当您没有npm包，并且需要包含自定义脚本时，如何将这些脚本配置为在您的react测试库jest-test中运行？
我通过在一个jest设置文件中自定义JSDOM成功地加载了一个脚本：
// jest.config.js
module.exports = {
setupFilesAfterEnv: [
'./jest-setup.js',
],
};
// jest-setup.js
import { JSDOM } from 'jsdom';
const dom = new JSDOM(<!DOCTYPE html><body></body>, {
resources: 'usable',
runScripts: 'dangerously',
});
global.window = dom.window;
global.document = dom.window.document;
关键是用{ resources: 'usable', runScripts: 'dangerously' }配置JSDOM。请参阅关于执行脚本的jsdom文档。
您可以在您的jest配置中设置这些选项(假设是jsdom环境(：
testEnvironment: 'jsdom',
testEnvironmentOptions: {
resources: 'usable',
runScripts: 'dangerously',
},
请参阅关于执行脚本的jsdom文档和关于配置测试环境的jest文档。