我有一个反应成分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测试文件中，我需要模拟一个影子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);
});
});
我得到了Error: attachShadow is undefined。我认为是因为它仅是浏览器。
我的问题：
如何模拟影子dom，以便可以在玩笑测试中运行它？
我使用这篇文章来解决我在Svelte中的shadowRoot测试问题。所有功能都放在单独的CrudTableService.js。
中使用玩笑来运行单元测试并捕获影子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;