deno で react testing library を使う

deno-react-testing.tsx

// deno test --no-check --allow-env counter.tsx
import { useCallback, useState } from "react";

// increment counter by click
export default function Counter() {
  const [count, setCount] = useState(0);
  const onClick = useCallback(() => setCount(count + 1), [count]);
  return <div>
    <span data-testid="count">{count}</span>
    <button type="button" onClick={onClick} data-testid="increment-button">+</button>
  </div>;
}

if (!import.meta.main) {
  await import("npm:global-jsdom/register");
  const { expect } = await import("https://deno.land/std@0.211.0/expect/expect.ts");
  const { userEvent } = await import('@testing-library/user-event');
  const { render, screen } = await import('@testing-library/react');
  document.body.innerHTML = '<div id="root"></div>';
  Deno.test("Usage", async () => {
    render(<Counter />);
    expect(screen.getByTestId('count').textContent).toEqual('0');
    await userEvent.click(screen.getByText('+'));
    expect(screen.getByTestId('count').textContent).toEqual('1');
  });
}

deno.json

{
  "compilerOptions": {
    "lib": [
      "deno.window",
      "deno.ns",
      "deno.fetch",
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "jsx": "react-jsx",
    "jsxImportSource": "react"
  }
}

package.json

{
  "devDependencies": {
    "@testing-library/react": "^14.1.2",
    "@testing-library/user-event": "^14.5.2",
    "@types/react": "^18.2.47",
    "@types/react-dom": "^18.2.18",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}