javascript - 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 并检查快照:

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

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