Как реализовать локализацию (i18n) в веб-приложении?

«Как реализовать локализацию (i18n) в веб-приложении?» — вопрос из категории Инструменты тестирования, который задают на 10% собеседований QA Тестировщик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Локализация (i18n) реализуется через комбинацию библиотек, инструментов тестирования и CI/CD-конфигурации.

1. Библиотеки для управления переводами:

  • React: react-i18next
  • Vue: vue-i18n
  • Общий подход: Хранение переводов в JSON-файлах по языкам.
// i18n.js (React с i18next)
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n.use(initReactI18next).init({
  resources: {
    en: { translation: { welcome: 'Welcome' } },
    ru: { translation: { welcome: 'Добро пожаловать' } }
  },
  lng: 'en',
  fallbackLng: 'en'
});

2. Локализация данных:

  • Даты: new Date().toLocaleDateString('ru-RU')
  • Валюты: new Intl.NumberFormat('ru-RU', { style: 'currency', currency: 'RUB' }).format(1000)

3. Тестирование локализации:

  • E2E (Cypress): Проверка текста в интерфейсе: cy.contains('Добро пожаловать').
  • RTL (Right-to-Left): Тестирование поддержки арабского/иврита с помощью @testing-library.
  • Мокирование API: Использование MSW или аналогов для симуляции ответов API на разных языках в Storybook и тестах.

4. Сборка и деплой: Настройка CI/CD для создания мультиязычных сборок через environment-переменные (например, VITE_LANG=ru).