前端测试技能指南：React组件、hooks和上下文测试完整教程

frontend-test by davidcastagnetoa/skills

1 周安装量

GitHub

安装命令

npx skills add https://github.com/davidcastagnetoa/skills --skill frontend-test

React 测试前端架构

🇨🇳中文介绍

前端测试技能

为 Ocralis 前端编写 React 组件、hooks 和上下文的测试。

何时激活

为现有组件或页面添加测试
测试自定义 hooks 或上下文（AuthContext、ThemeContext）
验证表单和用户流程
模拟 API 调用
提高前端测试覆盖率

设置

安装

cd ocralis_frontend
npm install -D vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event jsdom

vitest.config.ts（扩展 vite.config.ts）

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

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: "./src/test/setup.ts",
    css: true,
  },
});

设置文件 (`src/test/setup.ts`)

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

package.json 中的脚本

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

🇺🇸English

Frontend Test Skill

Escribe tests para componentes React, hooks y contextos del frontend Ocralis.

When to Activate

Anadir tests a un componente o pantalla existente
Testear hooks custom o contextos (AuthContext, ThemeContext)
Validar formularios y flujos de usuario
Mockear llamadas API
Mejorar cobertura de tests del frontend

Setup

Instalacion

cd ocralis_frontend
npm install -D vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event jsdom

vitest.config.ts (extender vite.config.ts)

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

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: "./src/test/setup.ts",
    css: true,
  },
});

Setup File (`src/test/setup.ts`)

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

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

网页可访问性（A11y）开发指南：实现WCAG合规、键盘导航与屏幕阅读器支持

12,600 周安装

代码审查最佳实践指南：完整流程、安全与性能审查清单

12,400 周安装

后端测试指南：API端点、业务逻辑与数据库测试最佳实践

11,800 周安装

Vue 3 调试指南：解决响应式、计算属性与监听器常见错误

11,400 周安装

// src/screens/Login/__tests__/Login.test.tsx
import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { BrowserRouter } from "react-router-dom";
import { AuthProvider } from "../../../context/AuthContext";
import Login from "../Login";

const renderLogin = () => {
  render(
    <BrowserRouter>
      <AuthProvider>
        <Login />
      </AuthProvider>
    </BrowserRouter>
  );
};

describe("Login", () => {
  it("deberia mostrar formulario de login", () => {
    renderLogin();
    expect(screen.getByPlaceholderText(/email/i)).toBeInTheDocument();
    expect(screen.getByPlaceholderText(/password/i)).toBeInTheDocument();
  });

  it("deberia mostrar error con campos vacios", async () => {
    renderLogin();
    const submitBtn = screen.getByRole("button", { name: /iniciar/i });
    await userEvent.click(submitBtn);
    await waitFor(() => {
      expect(screen.getByText(/requerido/i)).toBeInTheDocument();
    });
  });
});

// src/context/__tests__/AuthContext.test.tsx
import { renderHook, act } from "@testing-library/react";
import { AuthProvider, useAuth } from "../AuthContext";

describe("AuthContext", () => {
  it("deberia iniciar sin usuario", () => {
    const { result } = renderHook(() => useAuth(), {
      wrapper: AuthProvider,
    });
    expect(result.current.user).toBeNull();
  });

  it("deberia guardar usuario al hacer login", () => {
    const { result } = renderHook(() => useAuth(), {
      wrapper: AuthProvider,
    });
    act(() => {
      result.current.login("token", "refresh", {
        id: 1,
        name: "Test",
        email: "t@t.com",
      });
    });
    expect(result.current.user).toBeTruthy();
    expect(result.current.user?.email).toBe("t@t.com");
  });
});

import { vi } from "vitest";

vi.mock("../../lib/api", () => ({
  default: {
    get: vi.fn(),
    post: vi.fn(),
    put: vi.fn(),
    delete: vi.fn(),
  },
}));

import { vi } from "vitest";

vi.mock("../../services/company.service", () => ({
  getCompanies: vi.fn().mockResolvedValue([
    { id: 1, nombre: "Empresa Test", cif: "B12345678" },
  ]),
  createCompany: vi.fn().mockResolvedValue({ id: 2, nombre: "Nueva" }),
}));

辅助工具：使用 Providers 包装

// src/test/helpers.tsx
import { BrowserRouter } from "react-router-dom";
import { AuthProvider } from "../context/AuthContext";
import { ThemeProvider } from "../context/ThemeContext";

export const AllProviders = ({ children }: { children: React.ReactNode }) => (
  <BrowserRouter>
    <AuthProvider>
      <ThemeProvider>
        {children}
      </ThemeProvider>
    </AuthProvider>
  </BrowserRouter>
);

src/
├── test/
│   ├── setup.ts
│   └── helpers.tsx
├── screens/
│   └── Login/__tests__/Login.test.tsx
├── context/
│   └── __tests__/AuthContext.test.tsx
├── components/
│   └── __tests__/ProtectedRoute.test.tsx
└── services/
    └── __tests__/company.service.test.ts

概念	约定
框架	Vitest + Testing Library + jsdom
命名	`{Component}.test.tsx` 位于 `__tests__/` 文件夹中
包装器	始终使用 BrowserRouter + AuthProvider 包装
异步	对异步操作使用 `waitFor`
用户事件	优先使用 `userEvent` 而非 `fireEvent`
描述	使用西班牙语
查询	优先使用 `getByRole` > `getByText` > `getByTestId`

vitest.config.ts 已配置 jsdom
设置文件包含 @testing-library/jest-dom
组件测试包含 providers 包装
上下文测试使用 renderHook
API 和服务模拟
表单测试（验证、提交）
使用 waitFor 的异步测试
可复用的 providers 辅助工具

Script en package.json

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

Test de Componente/Pantalla

// src/screens/Login/__tests__/Login.test.tsx
import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { BrowserRouter } from "react-router-dom";
import { AuthProvider } from "../../../context/AuthContext";
import Login from "../Login";

const renderLogin = () => {
  render(
    <BrowserRouter>
      <AuthProvider>
        <Login />
      </AuthProvider>
    </BrowserRouter>
  );
};

describe("Login", () => {
  it("deberia mostrar formulario de login", () => {
    renderLogin();
    expect(screen.getByPlaceholderText(/email/i)).toBeInTheDocument();
    expect(screen.getByPlaceholderText(/password/i)).toBeInTheDocument();
  });

  it("deberia mostrar error con campos vacios", async () => {
    renderLogin();
    const submitBtn = screen.getByRole("button", { name: /iniciar/i });
    await userEvent.click(submitBtn);
    await waitFor(() => {
      expect(screen.getByText(/requerido/i)).toBeInTheDocument();
    });
  });
});

// src/context/__tests__/AuthContext.test.tsx
import { renderHook, act } from "@testing-library/react";
import { AuthProvider, useAuth } from "../AuthContext";

describe("AuthContext", () => {
  it("deberia iniciar sin usuario", () => {
    const { result } = renderHook(() => useAuth(), {
      wrapper: AuthProvider,
    });
    expect(result.current.user).toBeNull();
  });

  it("deberia guardar usuario al hacer login", () => {
    const { result } = renderHook(() => useAuth(), {
      wrapper: AuthProvider,
    });
    act(() => {
      result.current.login("token", "refresh", {
        id: 1,
        name: "Test",
        email: "t@t.com",
      });
    });
    expect(result.current.user).toBeTruthy();
    expect(result.current.user?.email).toBe("t@t.com");
  });
});

import { vi } from "vitest";

vi.mock("../../lib/api", () => ({
  default: {
    get: vi.fn(),
    post: vi.fn(),
    put: vi.fn(),
    delete: vi.fn(),
  },
}));

import { vi } from "vitest";

vi.mock("../../services/company.service", () => ({
  getCompanies: vi.fn().mockResolvedValue([
    { id: 1, nombre: "Empresa Test", cif: "B12345678" },
  ]),
  createCompany: vi.fn().mockResolvedValue({ id: 2, nombre: "Nueva" }),
}));

Helper: Wrapper con Providers

// src/test/helpers.tsx
import { BrowserRouter } from "react-router-dom";
import { AuthProvider } from "../context/AuthContext";
import { ThemeProvider } from "../context/ThemeContext";

export const AllProviders = ({ children }: { children: React.ReactNode }) => (
  <BrowserRouter>
    <AuthProvider>
      <ThemeProvider>
        {children}
      </ThemeProvider>
    </AuthProvider>
  </BrowserRouter>
);

src/
├── test/
│   ├── setup.ts
│   └── helpers.tsx
├── screens/
│   └── Login/__tests__/Login.test.tsx
├── context/
│   └── __tests__/AuthContext.test.tsx
├── components/
│   └── __tests__/ProtectedRoute.test.tsx
└── services/
    └── __tests__/company.service.test.ts

Concepto	Convencion
Framework	Vitest + Testing Library + jsdom
Naming	`{Component}.test.tsx` en carpeta `__tests__/`
Wrappers	Siempre wrappear con BrowserRouter + AuthProvider
Async	Usar `waitFor` para operaciones asincronas
User events	Preferir `userEvent` sobre `fireEvent`
Descripciones	En espanol
Queries	Preferir `getByRole` > `getByText` > `getByTestId`

vitest.config.ts configurado con jsdom
Setup file con @testing-library/jest-dom
Tests de componentes con providers wrapping
Tests de contextos con renderHook
Mocks de API y servicios
Tests de formularios (validacion, submit)
Tests async con waitFor
Helper de providers reutilizable

测试策略完整指南：单元/集成/E2E测试金字塔与自动化实践

11,200 周安装

前端测试技能指南：React组件、hooks和上下文测试完整教程

🇨🇳中文介绍

前端测试技能

何时激活

设置

安装

vitest.config.ts（扩展 vite.config.ts）

设置文件 (`src/test/setup.ts`)

package.json 中的脚本

🇺🇸English

Frontend Test Skill

When to Activate

Setup

Instalacion

vitest.config.ts (extender vite.config.ts)

Setup File (`src/test/setup.ts`)

相关 Skills

测试模式

组件/页面测试

上下文测试

API 模拟

服务模拟

辅助工具：使用 Providers 包装

测试结构

约定

检查清单

Script en package.json

Patrones de Test

Test de Componente/Pantalla

Test de Contexto

Mock de API

Mock de Servicio

Helper: Wrapper con Providers

Estructura de Tests

Convenciones

Checklist

最新 Skills

前端测试技能指南：React组件、hooks和上下文测试完整教程

🇨🇳中文介绍

前端测试技能

何时激活

设置

安装

vitest.config.ts（扩展 vite.config.ts）

设置文件 (src/test/setup.ts)

package.json 中的脚本

🇺🇸English

Frontend Test Skill

When to Activate

Setup

Instalacion

vitest.config.ts (extender vite.config.ts)

Setup File (src/test/setup.ts)

相关 Skills

测试模式

组件/页面测试

上下文测试

API 模拟

服务模拟

辅助工具：使用 Providers 包装

测试结构

约定

检查清单

Script en package.json

Patrones de Test

Test de Componente/Pantalla

Test de Contexto

Mock de API

Mock de Servicio

Helper: Wrapper con Providers

Estructura de Tests

Convenciones

Checklist

最新 Skills

设置文件 (`src/test/setup.ts`)

Setup File (`src/test/setup.ts`)