Webフロントエンドにおける網羅的テストパターンガイド

// src/components/TodoItem/TodoItem.tsx
 
import React, { useContext } from "react";
import type { Todo } from "../../types";
import { TodoContext } from "../context";
 
type Props = {
  todo: Todo;
};
 
export const TodoItem: React.FC<Props> = ({ todo }) => {
  const { toggle, deleteTodo } = useContext(TodoContext);
  return (
    <li className={todo.completed ? "completed" : ""}>
      <div className="view">
        <input
          className="toggle"
          type="checkbox"
          checked={todo.completed}
          onChange={() => toggle(todo.id)}
        />
        <label data-testid="todo-title">{todo.title}</label>
        <button className="destroy" onClick={() => deleteTodo(todo.id)} />
      </div>
    </li>
  );
};

// src/components/TodoItem/TodoItem.test.tsx
 
import React from "react";
import { render, screen } from "@testing-library/react";
import { TodoItem } from "./TodoItem";
import { TodoContext } from "../context";
import userEvent from "@testing-library/user-event";
 
const mockToggle = jest.fn();
const mockDeleteTodo = jest.fn();
const mockAdd = jest.fn();
 
describe("TodoItem", () => {
  // Arrange
  const mockTodo = {
    id: "1",
    title: "Test Todo",
    completed: false,
  };
 
  it("renders todo title", () => {
    // Act
    render(
      <TodoContext.Provider
        value={{
          toggle: mockToggle,
          deleteTodo: mockDeleteTodo,
          addTodo: mockAdd,
        }}
      >
        <TodoItem todo={mockTodo} />
      </TodoContext.Provider>
    );
 
    // Assert
    expect(screen.getByText(mockTodo.title)).toBeInTheDocument();
  });
 
  it("toggles todo completion", () => {
    // Arrange
    render(
      <TodoContext.Provider
        value={{
          toggle: mockToggle,
          deleteTodo: mockDeleteTodo,
          addTodo: mockAdd,
        }}
      >
        <TodoItem todo={mockTodo} />
      </TodoContext.Provider>
    );
 
    // Act
    userEvent.click(screen.getByRole("checkbox"));
 
    // Assert
    expect(mockToggle).toHaveBeenCalledWith(mockTodo.id);
  });
 
  it("deletes a todo", () => {
    // Arrange
    render(
      <TodoContext.Provider
        value={{
          toggle: mockToggle,
          deleteTodo: mockDeleteTodo,
          addTodo: mockAdd,
        }}
      >
        <TodoItem todo={mockTodo} />
      </TodoContext.Provider>
    );
 
    // Act
    userEvent.click(screen.getByRole("button"));
 
    // Assert
    expect(mockDeleteTodo).toHaveBeenCalledWith(mockTodo.id);
  });
});

// src/components/App/App.stories.tsx
 
import { ComponentStoryObj, ComponentMeta } from "@storybook/react";
import { App } from ".";
import { userEvent, within } from "@storybook/testing-library";
 
type Component = typeof App;
type Meta = ComponentMeta<Component>;
type Story = ComponentStoryObj<Component>;
 
const meta: Meta = {
  component: App,
};
export default meta;
 
export const AddTwoTodosAndCheckOneScenario: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await userEvent.type(canvas.getByRole("textbox"), "Write a blog post", {
      delay: 100,
    });
    await userEvent.keyboard("{enter}", { delay: 100 });
    await userEvent.type(canvas.getByRole("textbox"), "Develop sample app", {
      delay: 100,
    });
    await userEvent.keyboard("{enter}", { delay: 100 });
    await userEvent.click(canvas.getAllByRole("checkbox")[1]);
  },
};

// src/components/App/App.test.tsx
 
import { render, screen } from "@testing-library/react";
import { composeStories } from "@storybook/testing-react";
import * as stories from "./App.stories";
 
const { AddTwoTodosAndCheckOneScenario } = composeStories(stories);
 
describe("play AddTwoTodosAndCheckOneScenario", () => {
  it("renders two todos", async () => {
    // Arrange
    const { container } = render(<AddTwoTodosAndCheckOneScenario />);
 
    // Act
    await AddTwoTodosAndCheckOneScenario.play({ canvasElement: container });
 
    // Assert
    const todos = screen.getAllByTestId("todo-title");
    expect(todos).toHaveLength(2);
  });
  it("checks one todo", async () => {
    // Arrange
    const { container } = render(<AddTwoTodosAndCheckOneScenario />);
 
    // Act
    await AddTwoTodosAndCheckOneScenario.play({ canvasElement: container });
 
    // Assert
    const todoCheckboxes = screen.getAllByRole("checkbox", { checked: true });
    expect(todoCheckboxes).toHaveLength(1);
  });
});

## Feature: Todo App
 
## Background: The Todo App is opened
 
- Given the Todo App is opened
 
## Rule: Adding new Todos
 
### Scenario: Add a new Todo
 
- When the user enters a "new Todo" and enter key
- Then the "new Todo" is added to the list
 
### Scenario: Attempt to add an empty Todo
 
- When the user enters an empty Todo and clicks the Add button
- Then the Todo is not added to the list and "Not entered" message is displayed

// features/step_definitions/steps.ts
 
import { Given, When, Then } from "@cucumber/cucumber";
import World from "../support/World";
import assert from "assert";
 
Given("the Todo App is opened", async function (this: World) {
  await this.page.goto("https://silverbirder-react-todo-mvc.vercel.app");
});
 
When(
  "the user enters a {string} and enter key",
  async function (this: World, todo: string) {
    const todoInput = await this.page.getByPlaceholder("what you need to do?");
    await todoInput.type(todo);
    await this.page.keyboard.down("Enter");
  }
);
 
Then(
  "the {string} is added to the list",
  async function (this: World, todo: string) {
    const todos = await this.page.getByText(todo);
    assert((await todos.count()) === 1);
  }
);
 
When(
  "the user enters an empty Todo and clicks the Add button",
  async function (this: World) {
    const todoInput = await this.page.getByPlaceholder("what you need to do?");
    await todoInput.focus();
    await this.page.keyboard.down("Enter");
  }
);
 
Then(
  "the Todo is not added to the list and {string} message is displayed",
  async function (this: World, message: string) {
    const todos = await this.page.getByTestId("todo-title");
    assert((await todos.count()) === 0);
    const messages = await this.page.getByText(message);
    assert((await messages.count()) === 1);
  }
);

npx cucumber-js
..........
2 scenarios (2 passed)
6 steps (6 passed)
0m02.504s (executing steps: 0m02.476s)

// src/components/TodoList/TodoList.perf.test.tsx
 
import { render } from "@testing-library/react";
import { TodoList } from ".";
import { Todo } from "../../types";
import { Profiler } from "react";
 
describe("TodoList", () => {
  it("renders with acceptable performance", () => {
    // Arrange
    const onRender = jest.fn();
    const todos: Todo[] = [...Array(100)].map((value, index) => {
      return {
        id: index.toString(),
        title: "title",
        completed: false,
      };
    });
 
    // Act
    render(
      <Profiler id="PerformanceTestComponent" onRender={onRender}>
        <TodoList todos={todos} />
      </Profiler>
    );
 
    // Assert
    const [, , actualDuration, , , , ,] = onRender.mock.calls[0];
    expect(actualDuration).toBeLessThan(200);
  });
});

import { test, expect } from "@playwright/test";
 
test("no long tasks after button click", async ({ page }) => {
  // Navigate to the specified URL
  await page.goto(
    "https://googlesamples.github.io/web-fundamentals/tools/chrome-devtools/rendering-tools/forcedsync.html"
  );
 
  // Define a function to observe long tasks
  const observeLongTasks = async (): Promise<number> => {
    return await page.evaluate(() => {
      return new Promise<number>((resolve) => {
        let longTaskCount = 0;
 
        // Create a PerformanceObserver to observe long tasks
        const observer = new PerformanceObserver((entryList) => {
          for (const entry of entryList.getEntries()) {
            if (entry.entryType === "longtask") {
              longTaskCount++;
            }
          }
        });
 
        // Start observing long tasks
        observer.observe({ entryTypes: ["longtask"] });
 
        // Click the button
        const button = document.querySelector("button");
        button.click();
 
        // Wait for a short time to allow long tasks to be recorded
        setTimeout(() => {
          // Stop observing and resolve the promise with the count of long tasks
          observer.disconnect();
          resolve(longTaskCount);
        }, 3000);
      });
    });
  };
 
  // Observe long tasks after clicking the button
  const longTaskCount = await observeLongTasks();
 
  // Expect no long tasks to occur
  expect(longTaskCount).toBe(0);
});

npx playwright test

// .memlab/scenario.js
 
// initial page load's url
function url() {
  return "https://silverbirder-react-todo-mvc.vercel.app";
}
 
// action where you suspect the memory leak might be happening
async function action(page) {
  await page.type(".new-todo", "Hello World");
  await page.keyboard.press("Enter");
}
 
// how to go back to the state before action
async function back(page) {
  await page.hover(".view");
  await page.click(".destroy");
}
 
module.exports = { action, back, url };

memlab run --scenario .memlab/scenario.js
page-load[1.4MB](baseline)[s1] > action-on-page[1.6MB](target)[s2] > revert[1.8MB](final)[s3]
 
total time: 49.2s
Memory usage across all steps:
2.1 _________
1.9 _________
1.8 _________
1.7 ______▄▄_
1.5 ___▄▄_▄▄_
1.4 ___▄▄_▄▄_
1.3 ▄▄_▄▄_▄▄_
1.1 ▄▄_▄▄_▄▄_
1.0 ▄▄_▄▄_▄▄_
    1  2  3
 
No leaks found
MemLab found 0 leak(s)
✨  Done in 51.69s.

// src/components/App/App.stories.tsx
import { ComponentStoryObj, ComponentMeta } from "@storybook/react";
import { App } from ".";
import chaosFrontendToolkit from "chaos-frontend-toolkit";
 
type Component = typeof App;
type Meta = ComponentMeta<Component>;
type Story = ComponentStoryObj<Component>;
 
const meta: Meta = {
  component: App,
};
export default meta;
 
export const Monkey: Story = {
  decorators: [
    (Story) => {
      chaosFrontendToolkit.gremlins.start();
      return <Story />;
    },
  ],
};

stryker run
INFO ProjectReader Found 4 of 63 file(s) to be mutated.
INFO Instrumenter Instrumented 4 source file(s) with 47 mutant(s)
INFO ConcurrencyTokenProvider Creating 2 checker process(es) and 2 test runner process(es).
INFO DryRunExecutor Starting initial test run (jest test runner with "off" coverage analysis). This may take a while.
INFO DryRunExecutor Initial test run succeeded. Ran 8 tests in 20 seconds (net 8004 ms, overhead 12326 ms).
Mutation testing  [=========================================] 100% (elapsed: ~2m, remaining: n/a) 47/47 Mutants tested (21 survived, 0 timed out)
 
All tests
  ...
  TodoItem/TodoItem.test.tsx
    ✘ TodoItem renders todo title [line 18] (covered 0)
    ✘ TodoItem toggles todo completion [line 30] (covered 0)
    ✓ TodoItem deletes a todo [line 45] (killed 1)