AgentSkillsCN

testing-logging

提供 Node.js/TypeScript 和 React 应用程序的测试策略与日志记录模式,涵盖使用 pino 进行结构化日志记录、使用 Vitest 进行单元/集成测试,以及使用 Testing Library 进行 React 组件测试。适用于编写测试用例、配置日志记录,或建立统一的测试规范时使用。

SKILL.md
--- frontmatter
name: testing-logging
description: Provides testing strategies and logging patterns for Node.js/TypeScript and React applications, covering structured logging with pino, unit/integration testing with Vitest, and React component testing with Testing Library. Use when writing tests, setting up logging, or establishing testing patterns.

Testing & Logging Best Practices

Quick Start

Structured Logging (pino)

typescript
import pino from "pino"

export const logger = pino({
  level: process.env.LOG_LEVEL || "info",
  transport:
    process.env.NODE_ENV === "development"
      ? { target: "pino-pretty" }
      : undefined,
})

// Usage
logger.info({ port: 3000, env: "production" }, "Server started")
logger.error({ error, context: "riskyOperation" }, "Operation failed")

Log Levels

LevelWhen to Use
errorErrors needing immediate attention
warnPotential issues, deprecated usage
infoHigh-level application flow
debugDetailed diagnostic information

Testing Pyramid

LayerPercentageWhat to Test
Unit (70%)msPure functions, validators, business logic
Integration (20%)secondsAPI endpoints, database ops, service layer
E2E (10%)minutesCritical user journeys only

Unit Tests (Vitest)

typescript
import { describe, expect, it } from "vitest"

describe("formatDate", () => {
  it("formats ISO date to readable string", () => {
    expect(formatDate("2025-01-22T10:00:00Z")).toBe("January 22, 2025")
  })
})

React Component Tests

tsx
import { render, screen } from "@testing-library/react"
import userEvent from "@testing-library/user-event"

it("calls onClick when clicked", async () => {
  const onClick = vi.fn()
  render(<Button onClick={onClick}>Click</Button>)
  await userEvent.click(screen.getByRole("button"))
  expect(onClick).toHaveBeenCalledOnce()
})

Query Priority (prefer top)

  1. getByRole — Accessible name (best)
  2. getByLabelText — Form labels
  3. getByText — Text content
  4. getByTestId — Last resort

Test Commands

bash
pnpm test              # All tests
pnpm test:watch        # Watch mode
pnpm test:coverage     # With coverage

Additional Resources

  • For complete patterns including mocking, integration tests, providers, and coverage config, see reference.md