Question

我有一个反应组件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，以便可以在玩笑测试中运行它？

Answer 1

我用这篇文章解决了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;

如何在玩笑测试中模拟阴影元素

1 个答案: