Web 组件快照测试答案

【问题标题】：web components snapshot testWeb 组件快照测试
【发布时间】：2019-07-13 04:51:34
【问题描述】：

鉴于此自定义组件：

const style = `
  div {
    color: red;
  }
`;

const html = `
  <div>
    SAMPLE WEB COMPONENT
  </div>
`;

const $element = document.createElement('template');
$element.innerHTML = `
  <style>
    ${style}
  </style>
  ${html}
`;

export default class Sample extends HTMLElement {
  constructor() {
    super();
    this.root = this.attachShadow({ mode: 'closed' });
    this.root.appendChild($element.content.cloneNode(true));
  }
}

是否有机会使用 Jest 进行快照测试？使用类似 jest-snapshot-serializer-raw 或 jsdom + serializer 或其他的东西。

【问题讨论】：

有趣的问题。 jsdom 似乎是support shadow DOM，但我在他们的文档中没有找到任何具体内容
查看github.com/ionic-team/stencil/issues/895 我想知道document.getElementById(...).shadowRoot 是否可以为您提供访问权限，并且您可以像使用普通 HTML 片段一样对其进行序列化（顺便说一句，不知道任何序列化程序，请你？）

标签： javascript web components jestjs

【解决方案1】：

我有同样的问题，只需要以序列化方式（innerHTML）获取 WebComponent 并检查其快照：

it('should render correctly', () => {
    const myComponent = new MyComponent();

    expect(myComponent.innerHTML).toMatchSnapshot();
});

【讨论】：