I18n

Translation Map Pattern (enums / status types)

Use a const map to translate enum values — avoids switch statements and keeps keys type-safe.

// types.ts
export type CourseStatus = 'Active' | 'Paused' | 'Completed' | 'Cancelled'

export const courseStatusTranslations = {
  'Active':    'courses.status.active',
  'Paused':    'courses.status.paused',
  'Completed': 'courses.status.completed',
  'Cancelled': 'courses.status.cancelled',
} as const satisfies Record<CourseStatus, string>

// Component usage
const { t } = useTranslation()
{t(courseStatusTranslations[course.status])}

Namespace Conventions

Key hierarchy: students.form.firstName not student_first_name

Adding Translations (workflow)

1. Choose namespace: common if shared in 3+ places, else feature-specific
2. Add key to both locales/nl.json AND locales/en.json
3. Use the key in the component

// nl.json
{
  "students": {
    "form": {
      "firstName": "Voornaam",
      "lastName": "Achternaam"
    },
    "status": {
      "active": "Actief",
      "inactive": "Inactief"
    }
  }
}

// en.json
{
  "students": {
    "form": {
      "firstName": "First name",
      "lastName": "Last name"
    },
    "status": {
      "active": "Active",
      "inactive": "Inactive"
    }
  }
}

Testing

react-i18next is globally mocked in src/test/setup.ts — t('some.key') returns 'some.key' as-is.

// ✅ Assert on translation keys, not translated strings
expect(screen.getByText('students.form.firstName')).toBeInTheDocument()

// ❌ Don't assert on translated strings in tests
expect(screen.getByText('Voornaam')).toBeInTheDocument()

CRITICAL: Never import @/i18n/config in src/test/utils.tsx — breaks mock hoisting.

For typing t in helper functions:

import type { TFunction } from 'i18next'

function renderLabel(t: TFunction, status: CourseStatus) {
  return t(courseStatusTranslations[status])
}