Web组件快照测试

Question

给出此自定义组件：

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或其他东西。

Answer 1

我有同样的问题，所要做的就是以序列化的方式（innerHTML）获取WebComponent并检查快照：

subject