tabler-icons/packages/icons-preact/test.spec.js

import { h } from "preact";
import { render } from "@testing-library/preact";
import { Icon2fa } from "./src/icons.js";

describe("Preact Icon component", () => {
  test("should render icon component", () => {
    const { container } = render(<Icon2fa />);
    expect(container.getElementsByTagName("svg").length).toBeGreaterThan(0);
  });

  test("should update svg attributes when there are props passed to the component", () => {
    const { container } = render(
      <Icon2fa size={48} color={"red"} strokeWidth={4} />
    );

    const svg = container.getElementsByTagName("svg")[0];

    expect(svg.getAttribute("width")).toBe("48");
    expect(svg.getAttribute("stroke")).toBe("red");
    expect(svg.getAttribute("stroke-width")).toBe("4");
  });

  test("should match snapshot", () => {
    const { container } = render(<Icon2fa />);
    expect(container.innerHTML).toMatchInlineSnapshot(
      `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"tabler-icon tabler-icon-2fa\\"><path d=\\"M7 16h-4l3.47 -4.66a2 2 0 1 0 -3.47 -1.54m7 6.2v-8h4m-4 4l3 0m4 4v-6a2 2 0 0 1 4 0v6m-4 -3l4 0\\"></path></svg>"`
    );
  });
});