vercel__streamdown/packages/streamdown/__tests__/katex-lazy-load.test.tsx

import { render } from "@testing-library/react";
import { describe, it } from "vitest";
import { Streamdown } from "../index";

describe("KaTeX CSS Lazy Loading", () => {
  it("should render without errors when no math syntax is present", () => {
    render(<Streamdown>Regular markdown without math</Streamdown>);
    // Component should render without attempting to load KaTeX CSS
  });

  it("should load KaTeX CSS when block math syntax is present", () => {
    const markdownWithBlockMath = `
Some text before

$$
x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}
$$

Some text after
    `;

    render(<Streamdown>{markdownWithBlockMath}</Streamdown>);

    // Note: We can't easily test the dynamic import in tests,
    // but we can verify the component renders without errors
    // The actual CSS loading happens via dynamic import
  });

  it("should not load KaTeX CSS for single dollar by default (singleDollarTextMath: false)", () => {
    const markdownWithSingleDollar = `
This equation $E = mc^2$ would need double dollars to render.
    `;

    render(<Streamdown>{markdownWithSingleDollar}</Streamdown>);

    // Component should render without errors, and CSS should NOT load
    // because singleDollarTextMath defaults to false
  });

  it("should not load KaTeX CSS for dollar signs that are not math", () => {
    const markdownWithDollars = `
The price is $$100 or $50 for students.
    `;

    // This is a tricky case - our regex will detect $$ and $
    // But that's okay - better to be conservative
    render(<Streamdown>{markdownWithDollars}</Streamdown>);

    // Component should render without errors
  });
});