我有一个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);
});
});
我遇到了Error: attachShadow is undefined
的问题。我认为这是因为它仅限于浏览器环境。
我的问题是:
如何模拟 Shadow DOM,以便在 Jest 测试中运行?
package-lock.json
中使用的版本即可(它应该至少是 12.2.0)。 - skyboyer