我有一个 React 组件 ReactComponentContainer，它获取配置和 shadowRoot。
import React from 'react';
import App from './App';
import ReactComponent from './ReactComponent';
const ReactComponentContainer = function({config, shadowRoot}) {
configme(shadowRoot.host || shadowRoot);
return (
<App renderRoot={shadowRoot}>
<ReactComponent/>
</App>
);
};
export default ReactComponentContainer;
在我的 jest 测试文件中，我需要模拟一个 shadow dom，所以我可以将其作为参数传递给 ReactComponentContainer。
const header = document.createElement('header');
const shadowRoot = header.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<h1>Hello Shadow DOM</h1>';
import React from 'react';
import ReactComponentContainer from './ReactComponentContainer';
describe('ReactComponentContainer', () => {
beforeEach(() => {
setUp = (props) => {
return mount(<ReactComponentContainer {...props} />);
};
});
it('initailize ReactComponentContainer', () => {
// mock a shadow dom
const header = document.createElement('header');
// Error: attachShadow is undefined
const shadowRoot = header.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<h1>Hello Shadow DOM</h1>';
const props = {
config: {},
renderRoot: shadowRoot
};
const element = setUp(props);
});
});
我收到错误:attachShadow 未定义。我想是因为它只是浏览器。
我的问题:
如何模拟 shadow dom，以便在 jest 测试中运行它？
最佳答案
我用这篇文章解决了我在 Svelte 中的 shadowRoot 测试问题。 所有函数都放在一个单独的 CrudTableService.js 中。
为了使用 jest 运行单元测试并捕获影子 DOM 以提高代码覆盖率，我找到了这个解决方案:
it('testSetDeleteMode', async () => {
const documentHTML = '<!doctype html><html><body>' +
'<crud-table>' +. // added for shadow DOM test
'<div id="options-default"></div>' +
'<div id="options-delete"></div>' +
'</crud-table>' + // added for shadow DOM test
'</body></html>';
document.body.innerHTML = documentHTML // for light DOM tests
// create shadow DOM for customElement
const crudTable = document.querySelector('crud-table');
const shadowRoot = crudTable.attachShadow({mode: 'open'});
shadowRoot.innerHTML = documentHTML;
关于javascript - 如何在 Jest 测试中模拟影子元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59693620/