はじめに

React を使って UI コンポーネントを作成している場合、多言語対応のために以下のようにreact-i18nextのuseTranslation関数を使用している場合があるかと思います。

const { t } = useTranslation('HogeComponent');

...

<div>
  {t('hoge')}
</div>

この状況でコンポーネントのユニットテストを書く場合、useTranslation関数をテストのためにモックしないとテストが通りません。 今回はVitestでテストを書く場合のモックの方法について紹介します。

参考

https://vitest.dev/guide/mocking.html

https://react.i18next.com/misc/testing

mock する

import { vi } from 'vitest';

vi.mock('react-i18next', () => ({
  useTranslation: () => {
    return {
      t: (str: string) => str,
      i18n: {
        changeLanguage: () => new Promise(() => {}),
      },
    };
  },
  initReactI18next: {
    type: '3rdParty',
    init: () => {},
  },
}));

Vitest のドキュメントをそのままコピーしただけですが、これでuseTranslationがモックされ、正常にテストができるようになります。

【応用】Vitest の setup ファイルに追加する

https://vitest.dev/config/#setupfiles

ユニットテストを書くたびにこの処理を書くのはめんどくさいので、Vitest の setup ファイルに追加して、毎回自動的に i18n 関数がモックされるようにするといいかもしれません。

export default defineConfig({
  test: {
    setupFiles: [
      './test/setup-i18n.ts', // モック処理が書いてあるファイル
    ],
....

最後に

フロントエンドのテストはなにを書けばいいのかまだしっかりは分かっていない…

では

Bye