[JEST] react-i18next 테스트하기

해당 프로젝트에서 reaxt-i18next를 사용하여 아래와 같이 한/영 변환 기능을 적용하였다. 

 

초기 기능 적용 모습

 

따라서 이와 관련하여 nextjs app router에서 테스트 코드를 작성해보았다.  

 

jest.setup.ts

import '@testing-library/jest-dom';

// 아래 내용 추가 (useTranslation 훅 등 목업)
jest.mock('react-i18next', () => ({
  useTranslation: () => {
    return {
      t: (str: string) => {
        return str;
      },
      i18n: {
        changeLanguage: () => new Promise(() => {}),
      },
    };
  },
  initReactI18next: {
    type: '3rdParty',
    init: jest.fn(),
  },
}));

 

index.test.tsx

import React from 'react';
import { render } from '@testing-library/react';
import Header from '@/components/header/Header';

describe('한영 변환 테스트', () => {
  it('영어 페이지', () => {
    const { container } = render(<Header lng="en" />);
    expect(container.innerHTML).toContain('roadmap');
  });
});