Lit Elements(웹 구성 요소)에 대한 Cypress 구성 요소 테스트

최근에는 웹 컴포넌트 프레임워크인 lit을 사용하고 있습니다.

웹 구성 요소에 익숙하지 않은 경우 여기에 빠른 요약이 있습니다.

Web Components is a suite of different technologies allowing you to create reusable custom elements - with their functionality encapsulated away from the rest of your code - and utilize them in your web apps.

MDN - https://developer.mozilla.org/en-US/docs/Web/Web_Components

Lit는 .

점등 테스트

Lit Elements를 테스트하는 방법에 대해 몇 가지 주목할만한 프로젝트를 수행했습니다.

Spectrum web components Adobe는 Lit Elements를 많이 사용하는 정말 성숙한 디자인 시스템입니다. 그들의 테스트 설정은 제안된 web test runner을 사용합니다. Lit's documentation on testing은 해당 라이브러리를 사용할 것을 제안합니다.

Cypress은 이 공간에서 가장 인기 있는 테스트 러너 중 하나가 되었습니다. 그래서 조명 문서에서 이에 대한 지침을 볼 수 없다는 사실에 약간 놀랐습니다. 최신 브라우저에서 웹 구성 요소 테스트를 위한 이상적인 후보라고 생각하며recently added support for safari 크롬, 웹킷, 전자 및 양자(파이어폭스) 기반 브라우저 전반에 걸쳐 광범위한 적용 범위를 갖습니다.

Cypress로 Lit 구성 요소 테스트

조명 요소로 테스트하려면 사이프러스가 포함된 프로젝트가 필요합니다.

TL; DR

예제 프로젝트: https://github.com/simonireilly/cypress-lit

테스트 설정은 Lit 요소를 DOM에 마운트하기 위한 명령 작성cy.mount으로 구성됩니다.

import { getContainerEl } from "@cypress/mount-utils";
import { LitElement, render, TemplateResult } from "lit";

export const mount = (_element: LitElement, template: TemplateResult) => {
  const target = getContainerEl();

  render(template, target);

  return cy
    .wait(0, { log: false })
    .then(() => {
      const mountMessage = `
        <${String(_element.constructor.name)} ... />
      `;

      Cypress.log({
        name: "mount",
        message: [mountMessage],
      })
        .snapshot("mounted")
        .end();
    })
    .get("[data-cy-root]")
    .children()
    .first()
    .shadow();
};

이는 다음과 같이 테스트를 작성할 수 있음을 의미합니다.

import { html } from "lit";
import { MyElement } from "../../src/my-element";

describe("my-element.cy.ts", () => {
  it("playground", () => {
    cy.mount(new MyElement(), html`<my-element></my-element>`).as("element");

    cy.get("@element").contains("count").click();
  });
});

이와 마찬가지로 구성 요소에 대해 사이프러스 테스트를 실행할 수 있습니다. 다음은 하나를 테스트하는 간단한 스냅샷입니다.

마무리

이것은 cypress로 Lit에 대한 구성 요소 테스트를 실행하는 방법에 대한 간단한 예입니다. 설치에 필요한 정보가 충분하기를 바랍니다.

cypress 구성 요소는 이미 많은 프레임워크를 지원하기 때문에 공식적인 조명 구성 요소 구현이 머지 않아 가능할 것이라고 생각합니다. 그동안 즐거운 테스트!