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

Question

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

3

我有一个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 测试中运行？

- kenpeter

为什么你要在测试中尝试使用 Shadow DOM？ - skyboyer

无论如何，实现 Shadow API 是 JSDOM 的责任。看起来它可能已经被支持了（https://github.com/jsdom/jsdom/issues/2343），只需检查您在 package-lock.json 中使用的版本即可（它应该至少是 12.2.0）。 - skyboyer

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- nologin · Answer 1

我使用了这篇文章来解决Svelte中shadowRoot测试问题。所有函数都放在单独的CrudTableService.js文件中。

为了使用jest运行单元测试并捕获shadow 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;