Applying React TDD in Practice — TDD with React, Part 14

• Upfront costs
  Setting up the test environment, creating mock data, and writing tests all take time.
• Long-term benefits
  The benefits become apparent as the project grows. You spend far less time tracking down bugs and doing QA, and refactoring becomes much less intimidating.

• What to test
  • Core business logic, such as cart calculations and payment totals
  • Complex shared components, such as dropdowns and modals
  • Areas that change frequently or often have bugs
• What you can skip
  • Simple UI rendering, such as checking whether something is red
  • Files containing constants or simple configuration
  • Behavior built into
    React
    or third-party libraries

name: Run Tests
 
on:
  push:
#    branches: [ main ] # main 브랜치에 푸시될 때만 동작하도록 변경
    branches: [ "**" ] # 모든 브랜치에 대해 동작하도록 변경
  pull_request:
    branches: [ main ]
 
jobs:
  test:
    runs-on: ubuntu-latest
 
    steps:
      # 1. 코드를 내려받습니다.
      - uses: actions/checkout@v4
 
      # 2. Node.js를 설치합니다.
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18'
 
      # 3. 의존성 패키지를 설치합니다.
      - name: Install dependencies
        run: npm ci
 
      # 4. 테스트를 실행합니다. (이 단계가 실패하면 Merge가 막힙니다)
      - name: Run tests
        run: npm test

Leave the place cleaner than you found it.

• If the component you need to change today is Login.tsx, write tests
  just for that file
  .
• When a bug occurs, add a test case that reproduces it, then fix it.

git clone https://github.com/PROMLEE/my-tdd-app.git
cd my-tdd-app
git checkout part14

• Cost and investment
  Progress is slower at first, and the investment pays off during maintenance.
• Automation (CI)
  Use tools such as GitHub Actions to make tests run automatically and prevent mistakes.
• Gradual adoption
  Build coverage for legacy code incrementally, starting with the code you touch.

Next time, we will wrap up the series with

Part 15: React TDD Recap

and discuss what to learn next.

• GitHub Actions Documentation↗
  The official documentation for GitHub's CI/CD tool.
• Testing Legacy Code↗
  A summary of the main ideas in Michael Feathers's
  Working Effectively with Legacy Code
  .