TypeScriptとReact Testing Libraryで実現する型安全なテスト方法

# 基本パッケージのインストール
npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event

# TypeScript用型補完の追加
npm install --save-dev @types/jest @types/react @types/react-dom

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "types": ["jest", "@testing-library/jest-dom"]
  }
}

module.exports = {
  testEnvironment: "jsdom",
  moduleFileExtensions: ["ts", "tsx", "js"],
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest"
  },
  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"]
};

import "@testing-library/jest-dom";

import { render, screen } from "@testing-library/react";
import React from "react";

const Greeting: React.FC<{ name: string }> = ({ name }) => <h1>Hello, {name}!</h1>;

test("renders a greeting message", () => {
  render(<Greeting name="John" />);
  expect(screen.getByText("Hello, John!")).toBeInTheDocument();
});

npm test

type ButtonProps = {
  label: string;
  onClick: () => void;
};

const Button: React.FC<ButtonProps> = ({ label, onClick }) => (
  <button onClick={onClick}>{label}</button>
);

import { render, screen, fireEvent } from "@testing-library/react";

test("Button displays label and handles click event", () => {
  const mockClickHandler = jest.fn();
  render(<Button label="Click Me" onClick={mockClickHandler} />);

  const button = screen.getByText("Click Me");
  fireEvent.click(button);

  expect(mockClickHandler).toHaveBeenCalledTimes(1);
});

type CardProps<T> = {
  item: T;
  render: (item: T) => React.ReactNode;
};

const Card = <T,>({ item, render }: CardProps<T>) => <div>{render(item)}</div>;

test("Button handles empty label", () => {
  render(<Button label="" onClick={() => {}} />);
  expect(screen.getByRole("button")).toBeEmptyDOMElement();
});

type LoginFormValues = {
  email: string;
  password: string;
};

const LoginForm: React.FC<{ onSubmit: (values: LoginFormValues) => void }> = ({ onSubmit }) => {
  const [values, setValues] = React.useState<LoginFormValues>({ email: "", password: "" });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValues({ ...values, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSubmit(values);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" value={values.email} onChange={handleChange} placeholder="Email" />
      <input name="password" value={values.password} onChange={handleChange} placeholder="Password" type="password" />
      <button type="submit">Submit</button>
    </form>
  );
};

import { render, screen, fireEvent } from "@testing-library/react";

test("LoginForm submits correct values", () => {
  const mockSubmit = jest.fn();

  render(<LoginForm onSubmit={mockSubmit} />);

  const emailInput = screen.getByPlaceholderText("Email");
  const passwordInput = screen.getByPlaceholderText("Password");
  const submitButton = screen.getByText("Submit");

  fireEvent.change(emailInput, { target: { value: "test@example.com" } });
  fireEvent.change(passwordInput, { target: { value: "securepassword" } });
  fireEvent.click(submitButton);

  expect(mockSubmit).toHaveBeenCalledWith({
    email: "test@example.com",
    password: "securepassword",
  });
  expect(mockSubmit).toHaveBeenCalledTimes(1);
});

test("LoginForm does not submit with empty fields", () => {
  const mockSubmit = jest.fn();

  render(<LoginForm onSubmit={mockSubmit} />);

  const submitButton = screen.getByText("Submit");
  fireEvent.click(submitButton);

  expect(mockSubmit).not.toHaveBeenCalled();
});

type User = {
  id: number;
  name: string;
  email: string;
};

type UserListProps = {
  users: User[];
};

const mockUsers: User[] = [
  { id: 1, name: "Alice", email: "alice@example.com" },
  { id: 2, name: "Bob", email: "bob@example.com" },
];

const mockFetchUsers = jest.fn<Promise<User[]>, []>(() =>
  Promise.resolve(mockUsers)
);

import { render, screen } from "@testing-library/react";

const UserList: React.FC<UserListProps> = ({ users }) => (
  <ul>
    {users.map((user) => (
      <li key={user.id}>{user.name}</li>
    ))}
  </ul>
);

test("renders user list correctly", () => {
  render(<UserList users={mockUsers} />);

  expect(screen.getByText("Alice")).toBeInTheDocument();
  expect(screen.getByText("Bob")).toBeInTheDocument();
});

const emptyUsers: User[] = [];

test("renders empty state when no users are provided", () => {
  render(<UserList users={emptyUsers} />);
  expect(screen.queryByRole("listitem")).toBeNull();
});

type UserProfileProps = {
  id: number;
  name: string;
  email?: string; // オプショナルなプロパティ
};

const UserProfile: React.FC<UserProfileProps> = ({ id, name, email }) => (
  <div>
    <p>ID: {id}</p>
    <p>Name: {name}</p>
    {email && <p>Email: {email}</p>}
  </div>
);

import { render, screen } from "@testing-library/react";

test("renders UserProfile with required fields", () => {
  render(<UserProfile id={1} name="John Doe" />);

  expect(screen.getByText("ID: 1")).toBeInTheDocument();
  expect(screen.getByText("Name: John Doe")).toBeInTheDocument();
});

test("renders UserProfile with optional email", () => {
  render(<UserProfile id={1} name="John Doe" email="john@example.com" />);

  expect(screen.getByText("Email: john@example.com")).toBeInTheDocument();
});

const validUser: UserProfileProps = {
  id: 1,
  name: "Alice",
  email: "alice@example.com",
};

const invalidUser: any = {
  id: "wrong-type", // 型エラーを誘発
  name: "Bob",
};

test("throws error for invalid props", () => {
  expect(() => render(<UserProfile {...invalidUser} />)).toThrow();
});

const mockFetchUser = async (): Promise<UserProfileProps> => ({
  id: 2,
  name: "Jane Doe",
  email: "jane@example.com",
});

test("fetches and renders user profile", async () => {
  const user = await mockFetchUser();

  // 型アサーションを使用して型を保証
  expect(user as UserProfileProps).toHaveProperty("email");

  render(<UserProfile {...user} />);
  expect(screen.getByText("Jane Doe")).toBeInTheDocument();
});

type Task = {
  id: number;
  title: string;
  completed: boolean;
};

type TaskListProps = {
  tasks: Task[];
  onToggle: (id: number) => void;
};

const TaskList: React.FC<TaskListProps> = ({ tasks, onToggle }) => (
  <ul>
    {tasks.map((task) => (
      <li key={task.id}>
        <label>
          <input
            type="checkbox"
            checked={task.completed}
            onChange={() => onToggle(task.id)}
          />
          {task.title}
        </label>
      </li>
    ))}
  </ul>
);

import { render, screen } from "@testing-library/react";

const mockTasks: Task[] = [
  { id: 1, title: "Learn TypeScript", completed: false },
  { id: 2, title: "Write Tests", completed: true },
];

test("renders a list of tasks", () => {
  render(<TaskList tasks={mockTasks} onToggle={jest.fn()} />);

  expect(screen.getByText("Learn TypeScript")).toBeInTheDocument();
  expect(screen.getByText("Write Tests")).toBeInTheDocument();
});

import { render, screen, fireEvent } from "@testing-library/react";

test("calls onToggle when a task is toggled", () => {
  const mockOnToggle = jest.fn();

  render(<TaskList tasks={mockTasks} onToggle={mockOnToggle} />);

  const checkbox = screen.getAllByRole("checkbox")[0];
  fireEvent.click(checkbox);

  expect(mockOnToggle).toHaveBeenCalledWith(1);
  expect(mockOnToggle).toHaveBeenCalledTimes(1);
});

test("renders no tasks when task list is empty", () => {
  render(<TaskList tasks={[]} onToggle={jest.fn()} />);

  expect(screen.queryByRole("listitem")).toBeNull();
});

const renderWithTasks = (tasks: Task[], onToggle: jest.Mock) =>
  render(<TaskList tasks={tasks} onToggle={onToggle} />);

test("renders tasks using helper function", () => {
  const mockOnToggle = jest.fn();
  renderWithTasks(mockTasks, mockOnToggle);

  expect(screen.getByText("Learn TypeScript")).toBeInTheDocument();
});

const createMockData = <T>(data: T): T => data;

const mockTask = createMockData<Task>({
  id: 1,
  title: "Example Task",
  completed: false,
});

npm test -- --coverage

import { screen, prettyDOM } from "@testing-library/react";

console.log(prettyDOM(screen.getByRole("list")));

"strict": true