1111

.github/workflows/ci.yml

@@ -0,0 +1,58 @@
+name: CI - Unit Tests & Coverage
+
+on:
+  pull_request:
+    branches:
+      - main # 或者你用于主开发分支的其他名称
+  push:
+    branches:
+      - main
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "20"
+
+      - name: Install dependencies
+        run: npm install --legacy-peer-deps
+
+      - name: Run unit tests and collect coverage
+        run: npm run test:coverage
+        env:
+          CI: true
+
+      - name: Debug coverage files
+        run: ls -R coverage
+
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v5
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          slug: TD-gaowei/unit-test-react
+          files: ./coverage/lcov.info # 修改为你实际的覆盖率报告路径
+          fail_ci_if_error: true
+          root_dir: /home/runner/work/unit-test-react/unit-test-react
+          verbose: true
+          flags: unittests
+          # name: codecov-umbrella
+
+      - name: Fail the PR if coverage drops in the new commit
+        run: |
+          COMMIT_SHA=${{ github.event.pull_request.head.sha }}
+          coverage=$(curl -s https://codecov.io/api/gh/${{ github.repository }}/commit/$COMMIT_SHA \
+            | jq -r '.commit.totals.coverage')
+
+          echo "Current coverage: $coverage"
+
+          if [[ -z "$coverage" || $(echo "$coverage < 80" | bc) -eq 1 ]]; then
+            echo "Coverage is below 80% or not found, failing PR"
+            exit 1
+          fi

.gitignore

@@ -24,4 +24,4 @@ dist-ssr
 *.sw?
 
 node_modules
-coverage
+# coverage

README.md

@@ -1,6 +1,13 @@
+- 工具方法测试 ✅
+- 组件 UI 测试 ✅
+- 组件 UI 交互测试 ✅
+- React Hooks 测试 ✅. -> 本质上是函数测试
 
+如果可以用当作 hooks 测试，那就用 Hooks 的方式测试，要么可以当下组件中进行测试
 
-- 工具方法测试
-- 组件UI测试
-- 组件UI交互测试
-- React Hooks测试
+- 使用 Zustand 的 hooks 测试 ✅
+- 快照测试 ✅
+- 异步测试 ✅
+- 异常测试 ✅
+- 代码覆盖率测试 ✅
+- 边界测试 - 本质上是多种输入不同参数测试的组合 ✅

package.json

@@ -8,12 +8,13 @@
     "lint": "eslint .",
     "preview": "vite preview",
     "test": "vitest",
-    "test:coverage": "vitest --coverage"
+    "test:coverage": "npx c8 --reporter=lcov vitest"
   },
   "dependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react-dom": "18.3.1",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
@@ -24,6 +25,7 @@
     "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-v8": "3.0.8",
+    "c8": "^10.1.3",
     "eslint": "^9.21.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",

src/App.jsx

@@ -2,6 +2,8 @@ import { useState } from "react";
 import reactLogo from "./assets/react.svg";
 
 import "./App.css";
+import Login from "./components/Login/Login";
+import UserList from "./components/UserList/UserList";
 
 function App() {
   const [count, setCount] = useState(0);
@@ -25,6 +27,9 @@ function App() {
       <p className="read-the-docs">
         Click on the Vite and React logos to learn more
       </p>
+
+      <Login />
+      <UserList />
     </>
   );
 }

src/components/AccountList/AccountList.jsx

@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from "react";
+
+export default function AccountList() {
+  const [users, setUsers] = useState([]);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    // 模拟API请求
+    async function fetchUsers() {
+      try {
+        const response = await fetch("/api/users");
+        if (!response.ok) {
+          throw new Error("Failed to fetch users");
+        }
+        const data = await response.json();
+        setUsers(data);
+      } catch (err) {
+        setError(err.message);
+      }
+    }
+
+    fetchUsers();
+  }, []);
+
+  if (error) {
+    return <div>Error: {error}</div>;
+  }
+
+  return (
+    <ul>
+      {users.map((user) => (
+        <li key={user.id}>{user.name}</li>
+      ))}
+    </ul>
+  );
+}

src/components/Button/Button.jsx

@@ -0,0 +1,3 @@
+export default function Button({ label }) {
+  return <button>{label}</button>;
+}

src/components/Login/Login.jsx

@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+
+const Login = () => {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle login logic here
+    console.log("Username:", username);
+    console.log("Password:", password);
+  };
+
+  return (
+    <div className="login-container">
+      <form onSubmit={handleSubmit}>
+        <div className="form-group">
+          <label htmlFor="username">Username:</label>
+          <input
+            type="text"
+            id="username"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+          />
+        </div>
+        <div className="form-group">
+          <label htmlFor="password">Password:</label>
+          <input
+            type="password"
+            id="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+        </div>
+        <button type="submit">登录</button>
+      </form>
+    </div>
+  );
+};
+
+export default Login;

src/components/Login/__tests__/Login.test.jsx

@@ -0,0 +1,44 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+
+import Login from "../Login";
+import { expect } from "vitest";
+
+describe("Login Component", () => {
+  it("renders the login form", () => {
+    render(<Login />);
+    expect(screen.getByLabelText(/username/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/password/i)).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /登录/i })).toBeInTheDocument();
+  });
+
+  it("updates the username and password fields", () => {
+    render(<Login />);
+    const usernameInput = screen.getByLabelText(/username/i);
+    const passwordInput = screen.getByLabelText(/password/i);
+
+    fireEvent.change(usernameInput, { target: { value: "testuser" } });
+    fireEvent.change(passwordInput, { target: { value: "password123" } });
+
+    expect(usernameInput.value).toBe("testuser");
+    expect(passwordInput.value).toBe("password123");
+  });
+
+  it("handles form submission", () => {
+    render(<Login />);
+    const usernameInput = screen.getByLabelText(/username/i);
+    const passwordInput = screen.getByLabelText(/password/i);
+    const button = screen.getByRole("button", { name: /登录/i });
+
+    const spyConsole = vi.spyOn(console, "log").mockImplementation(() => {});
+
+    fireEvent.change(usernameInput, { target: { value: "testuser" } });
+    fireEvent.change(passwordInput, { target: { value: "password123" } });
+
+    fireEvent.click(button);
+
+    expect(usernameInput.value).toBe("testuser");
+    expect(passwordInput.value).toBe("password123");
+
+    expect(spyConsole).toHaveBeenCalledTimes(2);
+  });
+});

src/components/UserList/UserList.jsx

@@ -0,0 +1,26 @@
+import React, { useEffect, useState } from "react";
+
+const mockUsers = [{ name: "Alice" }, { name: "Bob" }, { name: "Charlie" }];
+
+const UserList = () => {
+  const [users, setUsers] = useState([]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setUsers(mockUsers);
+    }, 2000);
+  });
+
+  return (
+    <div>
+      <h2>User List</h2>
+      <ul>
+        {users.map((user, index) => (
+          <li key={index}>{user.name}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default UserList;

src/components/__tests__/AccountList.test.jsx

@@ -0,0 +1,63 @@
+// AccountList.test.js
+import { render, screen, waitFor } from "@testing-library/react";
+import AccountList from "../AccountList/AccountList";
+
+// 模拟 API 请求
+global.fetch = vi.fn();
+
+describe("AccountList", () => {
+  it("should display users after successful fetch", async () => {
+    // 模拟成功的 API 响应
+    fetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => [
+        { id: 1, name: "Alice" },
+        { id: 2, name: "Bob" },
+      ],
+    });
+
+    render(<AccountList />);
+
+    // 等待用户数据加载
+    await waitFor(() => screen.getByText("Alice"));
+    await waitFor(() => screen.getByText("Bob"));
+
+    // 检查用户是否渲染
+    expect(screen.getByText("Alice")).toBeInTheDocument();
+    expect(screen.getByText("Bob")).toBeInTheDocument();
+  });
+
+  it("should display an error message when fetch fails", async () => {
+    // 模拟失败的 API 响应
+    fetch.mockRejectedValueOnce(new Error("Failed to fetch users"));
+
+    render(<AccountList />);
+
+    // 等待错误消息渲染
+    await waitFor(() => screen.getByText(/Error:/));
+
+    // 检查错误消息
+    expect(
+      screen.getByText("Error: Failed to fetch users")
+    ).toBeInTheDocument();
+  });
+
+  it("should display an error message when API response is not ok", async () => {
+    // 模拟 API 返回失败的响应（非 2xx 状态）
+    fetch.mockResolvedValueOnce({
+      ok: false,
+      status: 500,
+      json: async () => ({ message: "Internal Server Error" }),
+    });
+
+    render(<AccountList />);
+
+    // 等待错误消息渲染
+    await waitFor(() => screen.getByText(/Error:/));
+
+    // 检查错误消息
+    expect(
+      screen.getByText("Error: Failed to fetch users")
+    ).toBeInTheDocument();
+  });
+});

src/components/__tests__/Button.test.jsx

@@ -0,0 +1,13 @@
+// Button.test.js
+import { render } from "@testing-library/react";
+import Button from "../Button/Button";
+
+describe("Button Component Snapshot", () => {
+  it("should match the snapshot", () => {
+    // 渲染组件
+    const { asFragment } = render(<Button label="Click Me" />);
+
+    // 使用快照 API 将渲染结果与之前保存的快照进行比较
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

src/components/__tests__/UserList.test.jsx

@@ -0,0 +1,22 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import UserList from "../UserList/UserList";
+import { expect } from "vitest";
+
+describe("UserList component", () => {
+  it("renders User List heading", () => {
+    render(<UserList />);
+    expect(screen.getByText("User List")).toBeInTheDocument();
+  });
+
+  it("renders users after timeout", async () => {
+    render(<UserList />);
+
+    const alice = await screen.findByText("Alice", {}, { timeout: 3000 });
+    const bob = await screen.findByText("Bob", {}, { timeout: 3000 });
+    const charlie = await screen.findByText("Charlie", {}, { timeout: 3000 });
+
+    expect(alice).toBeInTheDocument();
+    expect(bob).toBeInTheDocument();
+    expect(charlie).toBeInTheDocument();
+  });
+});

src/components/__tests__/__snapshots__/Button.test.jsx.snap

@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Button Component Snapshot > should match the snapshot 1`] = `
+<DocumentFragment>
+  <button>
+    Click Me
+  </button>
+</DocumentFragment>
+`;