2024年 React 環境構築 with Vite

curl https://get.volta.sh | bash
source ~/.zshrc # or ~/.bashrc
volta install node # LTS版をインストール
node -v

npm create vite@latest my-react-app -- --template react-swc-ts
cd my-react-app
npm install
npm run dev # 開発サーバーを起動
npm run build # プロダクションビルド
npm run preview # プロダクションビルドしたものをローカルで確認

volta pin node
volta pin npm

"volta": {
  "node": "20.10.0",
  "npm": "10.2.5"
}

"compilerOptions": {
  "baseUrl": "./",
  "paths": {
    "@/*": ["src/*"]
  }
}

npm install -D vite-tsconfig-paths

import react from "@vitejs/plugin-react-swc";
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
});

npm install -D \
  vitest \
  happy-dom \
  @vitest/coverage-v8 \
  @testing-library/react \
  @testing-library/user-event \
  @testing-library/jest-dom \
  msw

import { useState } from "react";

type User = {
  firstName: string;
  lastName: string;
};

const Sample = () => {
  const [user, setUser] = useState<User | null>(null);
  const [isLoading, setIsLoading] = useState(false);

  const handleClick = async () => {
    setIsLoading(true);
    const res = await fetch("https://api.example.com/user");
    const user = await res.json();
    setUser(user);
    setIsLoading(false);
  };

  if (isLoading) {
    return <div>Loading...</div>;
  }

  const username = user ? `${user.firstName} ${user.lastName}` : "Anonymous";

  return (
    <div>
      <h1>Hello, {username}</h1>
      <button onClick={handleClick}>ユーザー名取得</button>
    </div>
  );
};

export default Sample;

import { http, HttpResponse } from "msw";

export const handlers = [
  http.get("https://api.example.com/user", () => {
    return HttpResponse.json({
      firstName: "John",
      lastName: "Maverick",
    });
  }),
];

import { setupServer } from "msw/node";

import { handlers } from "./handlers";

export const server = setupServer(...handlers);

{
  "scripts": {
    "test": "vitest run --coverage",
    "update-snapshots": "vitest run --update"
  }
}

/// <reference types="vitest" />
import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  test: {
    // globals: true,
    environment: "happy-dom",
    setupFiles: ["./vitest-setup.ts"],
    // スナップショットの保存先を設定
    resolveSnapshotPath: (path, extension) => {
      return path.replace("/src/", "/__snapshots__/") + extension;
    },
  },
});

import "@testing-library/jest-dom/vitest";
import { cleanup } from "@testing-library/react";
import { beforeAll, afterEach, afterAll } from "vitest";

import { server } from "./mocks/node.js";

beforeAll(() => {
  server.listen();
});

afterEach(() => {
  server.resetHandlers();
  // cleanup は vite.config.ts の test.globals を true にした場合は不要
  cleanup();
});

afterAll(() => {
  server.close();
});

{
  "compilerOptions": {
    "types": ["vitest/globals"]
  },
  "include": ["src", "vitest-setup.ts"],
}

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { expect, test } from "vitest";

import Sample from "./Sample";

test("サンプルテスト", async () => {
  const user = userEvent.setup()
  render(<Sample />);
  expect(screen.getByRole("heading")).toHaveTextContent("Hello, Anonymous");
  const button = screen.getByRole("button", { name: "ユーザー名取得" });
  user.click(button);
  expect(await screen.findByText("Loading...")).toBeInTheDocument();
  expect(await screen.findByRole("heading")).toHaveTextContent(
    "Hello, John Maverick",
  );
});

test("スナップショットテスト", () => {
  const { container } = render(<Sample />);
  expect(container).toMatchSnapshot();
});

npm run test

npm install -D \
  eslint-plugin-react \
  eslint-plugin-vitest \
  eslint-plugin-import \
  prettier \
  eslint-config-prettier \
  npm-run-all

/** @type {import('eslint/lib/shared/types').ConfigData} */
module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended", // 追加
    "plugin:react/jsx-runtime",  // 追加
    "plugin:react-hooks/recommended",
    "plugin:vitest/recommended", // 追加
    "prettier", // 追加
  ],
  ignorePatterns: ["dist", ".eslintrc.cjs"],
  parser: "@typescript-eslint/parser",
  plugins: [
    "react-refresh",
    "import" // 追加
  ],
  settings: {
    react: { version: "detect" }, // 追加
  },
  rules: {
    "react-refresh/only-export-components": [
      "warn",
      { allowConstantExport: true },
    ],
    // it ではなく test の使用を強制
    "vitest/consistent-test-it": ["error", { fn: "test" }],
    // import の並び順を設定
    "import/order": [
      "warn",
      {
        groups: [
          "builtin",
          "external",
          "internal",
          ["parent", "sibling"],
          "object",
          "type",
          "index",
        ],
        "newlines-between": "always",
        pathGroupsExcludedImportTypes: ["builtin"],
        alphabetize: { order: "asc", caseInsensitive: true },
        pathGroups: [
          {
            pattern: "react",
            group: "external",
            position: "before",
          },
        ],
      },
    ],
  },
};

/** @type {import("prettier").Config} */
const config = {};

export default config;

{
  "scripts": {
    "lint": "run-p lint:*",
    "lint:tsc": "tsc --noEmit",
    "lint:prettier": "prettier . --check",
    "lint:eslint": "eslint . --ext .ts,.tsx",
    "fix": "run-s fix:*",
    "fix:prettier": "prettier . --write",
    "fix:eslint": "eslint . --ext .ts,.tsx --fix",
  }
}

npm run fix
npm run lint

git init
npm install --save-dev husky lint-staged
npx husky init
echo "npx lint-staged" > .husky/pre-commit

{
  "lint-staged": {
    "*.{ts,tsx}": "eslint --fix",
    "*": "prettier --write --ignore-unknown"
  }
}

git add .
git commit -m "init"

npx storybook@latest init

npm install -D chromatic

npx chromatic --project-token=<project-token>

name: Chromatic Deployment

on:
  push:
    branches:
      - main

jobs:
  chromatic:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - run: npm ci
      - uses: chromaui/action@latest
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

name: Lint

on: push

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: "20"
      - run: npm ci
      - run: npm run lint

name: Test

on: push

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: "20"
      - run: npm ci
      - run: npm run test