如何在玩笑測試中模擬陰影元素

Question

我有一個反應組件ReactComponentContainer ，它獲取 config 和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，以便我可以在玩笑測試中運行它？

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;

如何在玩笑測試中模擬陰影元素

問題描述

1 個解決方案

解決方案1
0 2020-06-05 22:49:43

如何在玩笑測試中模擬陰影元素

問題描述

1 個解決方案

解決方案1 0 2020-06-05 22:49:43

解決方案1
0 2020-06-05 22:49:43