我们通过 <script> 引入了自定义 Assets 找到 html 标签并呈现组件的标签。例如，我们有 <customABC /> .当页面加载脚本时，找到 <customABC />并返回该组件应该是什么。
在调用渲染之前，我正在尝试通过以下方式将脚本添加到我的文档中。
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-testing-library jest 测试中运行？
最佳答案
我通过在 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。请参阅 executing scripts 上的 jsdom 文档.
关于reactjs - 添加并执行脚本 react-testing-library 和 jest，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60535438/