添加和执行脚本react- jest library和jest

Question

我们有通过<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- test -library jest测试中运行？

Answer 1

通过在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文档。

Answer 2

您可以在jest配置中设置这些选项(假设jsdom环境)：

    testEnvironment: 'jsdom',
    testEnvironmentOptions: {
        resources: 'usable',
        runScripts: 'dangerously',
    },

参见jsdom docs about executing scripts和jest docs on configuring the test environment。