testing-patterns

mance-cyber's avatarfrom mance-cyber

Testing patterns for GoGoJap project. Use when writing tests, creating mocks, or following TDD workflow.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 11, 2026
[Testing and QA]

When & Why to Use This Skill

This Claude skill provides a comprehensive framework for implementing standardized testing patterns across full-stack applications, specifically optimized for Next.js and FastAPI environments. It streamlines the creation of robust test suites by offering structured templates for the AAA (Arrange, Act, Assert) pattern, factory-based mocking, and accessibility-focused frontend testing. By integrating these best practices, developers can ensure high code reliability, maintainable test codebases, and efficient Test-Driven Development (TDD) workflows.

Use Cases

  • Implementing standardized frontend unit tests using Jest and React Testing Library with a focus on user-centric 'getByRole' queries.
  • Developing backend test suites for FastAPI applications using pytest fixtures and asynchronous test handling.
  • Creating reusable mock data factories and API mocking strategies to isolate components and services during integration testing.
  • Enforcing consistent naming conventions and directory structures for test files to improve project-wide maintainability and readability.
  • Simulating complex user interactions and state changes in React components to validate UI logic and accessibility.
nametesting-patterns
descriptionTesting patterns for GoGoJap project. Use when writing tests, creating mocks, or following TDD workflow.

Testing Patterns

項目測試架構

Frontend (Next.js + React)

  • 使用 Jest + React Testing Library
  • 測試文件放在 __tests__ 目錄或使用 .test.tsx 後綴

Backend (FastAPI + Python)

  • 使用 pytest
  • 測試文件放在 tests/ 目錄

Test Structure

AAA Pattern (Arrange, Act, Assert)

describe('ProductCard', () => {
  it('should display product name and price', () => {
    // Arrange
    const product = { name: '北海道毛蟹', price: 580 }

    // Act
    render(<ProductCard product={product} />)

    // Assert
    expect(screen.getByText('北海道毛蟹')).toBeInTheDocument()
    expect(screen.getByText('$580')).toBeInTheDocument()
  })
})

Mocking Patterns

Factory Functions

// 建立 mock 數據工廠
function getMockProduct(overrides = {}) {
  return {
    id: 1,
    name: '測試商品',
    price: 100,
    sku: 'TEST-001',
    status: 'active',
    ...overrides
  }
}

// 使用
const expensiveProduct = getMockProduct({ price: 9999 })

API Mocking

// Mock API 調用
jest.mock('@/lib/api', () => ({
  api: {
    getProducts: jest.fn().mockResolvedValue({
      data: [getMockProduct()],
      total: 1
    })
  }
}))

React Testing Library 最佳實踐

查詢優先級

  1. getByRole - 最推薦，模擬用戶行為
  2. getByLabelText - 表單元素
  3. getByText - 一般文字
  4. getByTestId - 最後手段

測試用戶互動

import userEvent from '@testing-library/user-event'

it('should handle click', async () => {
  const user = userEvent.setup()
  const onClick = jest.fn()

  render(<Button onClick={onClick}>點擊</Button>)
  await user.click(screen.getByRole('button'))

  expect(onClick).toHaveBeenCalledTimes(1)
})

Python/Pytest Patterns

Fixtures

@pytest.fixture
def mock_product():
    return {
        "id": 1,
        "name": "測試商品",
        "price": 100,
        "sku": "TEST-001"
    }

def test_create_product(mock_product):
    result = create_product(mock_product)
    assert result.name == "測試商品"

Async Tests

@pytest.mark.asyncio
async def test_fetch_competitors():
    result = await fetch_competitors()
    assert len(result) > 0

命名規範

  • 測試文件：component.test.tsx 或 test_module.py
  • 測試描述：使用中文清楚描述行為
  • describe：描述被測試的組件/功能
  • it/test：描述預期行為