У меня есть компонент реакции 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 тестовом файле мне нужно имитировать теневой объект, поэтому я могу передать 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. Я думаю, потому что это только браузер.
Мой вопрос:
Как издеваться над теневым домом, чтобы запустить его в режиме шутливого тестирования?
