Text content not updating after i18n.changeLanguage() in React Testing Library test

[tuboihirokidesu]

I'm having an issue with i18next language switching in my React Testing Library tests. While the translation function (t()) correctly returns the English text after switching languages, the actual rendered content remains in Japanese.

Here's my test code:

import { render } from '../__utils__/test-utils'

    it('検索ラベルが表示されている', async () => {
      const { getByTestId, i18n } = render(
        <Home loggedInUser={user} quotes={quotes} orders={orders} />,
      )

      const expectedText = i18n.t('parts:部品検索')
      console.log(expectedText)
      expect(getByTestId('search-label').textContent).toBe(expectedText)

      expect(i18n.language).toBe('ja')

      // 英語に言語切替
      await act(async () => {
        await i18n.changeLanguage('en')
      })
      const expectedTextEn = i18n.t('parts:部品検索')
      console.log(expectedTextEn) // Parts Search
      // ↓ getByTestId('search-label').textContent to '部品検索'
      expect(getByTestId('search-label').textContent).toBe(expectedTextEn)
      expect(i18n.language).toBe('en')
    })

The component implementation:

import { useTranslation } from 'next-i18next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'

const Home: CustomNextPage = () => {
  const { t } = useTranslation(['top', 'quote', 'parts'])

  return (
    <p data-testid="search-label">
      {t('parts:部品検索')}
    </p>
  )
}

export const getServerSideProps = async (ctx) => {
  return {
    props: {
      ...(await serverSideTranslations(ctx.locale ?? 'ja', [
        'top',
        'common',
        'quote',
        'parts',
      ])),
    },
  }
}

export default Home

i18n test setup (f you don't mock it, the keys of the translation dictionary (JSON) will be rendered.):

import '@testing-library/jest-dom/vitest'
import i18next from 'i18next'
import { initReactI18next } from 'react-i18next'
import { vi, vitest } from 'vitest'

import enParts from '../app/public/locales/en/parts.json'
import enQuote from '../app/public/locales/en/quote.json'
import jaParts from '../app/public/locales/ja/parts.json'
import jaQuote from '../app/public/locales/ja/quote.json'

// i18nextの初期化
i18next.use(initReactI18next).init({
  lng: 'ja',
  fallbackLng: 'ja',
  ns: ['quote', 'parts', 'common', 'top'],
  defaultNS: 'quote',
  resources: {
    ja: {
      quote: jaQuote,
      parts: jaParts,
    },
    en: {
      quote: enQuote,
      parts: enParts,
    },
  },
  interpolation: {
    escapeValue: false,
  },
  react: {
    useSuspense: false,
  },
})

// next-i18nextのモック
vi.mock('next-i18next', () => ({
  useTranslation: (ns?: string | string[]) => {
    const namespace = Array.isArray(ns) ? ns[0] : ns
    return {
      t: (key: string, options?: Record<string, unknown>) => {
        const [ns, k] = key.includes(':') ? key.split(':') : [namespace, key]
        const finalKey = k
        const finalNs = ns || namespace || 'translation'
        return i18next.t(finalKey as any, { ...options, ns: finalNs } as any)
      },
      i18n: i18next,
    }
  },
  appWithTranslation: (Component: any) => Component,
  serverSideTranslations: vi.fn().mockResolvedValue({}),
}))

Test utils setup (custom render):

import { render, RenderOptions } from '@testing-library/react'
import i18next from 'i18next'
import { ReactElement } from 'react'

const customRender = (ui: ReactElement, options?: RenderOptions) => {
  return {
    ...render(ui, options),
    i18n: i18next,
  }
}

export * from '@testing-library/react'
export { customRender as render }

The test fails with:

Expected: "Parts Search"
Received: "部品検索"

While i18n.t() correctly returns the English translation after language change, the component's content doesn't update. I've tried adding a delay with setTimeout, but it didn't help.

Any suggestions on how to properly test i18n language switching with React Testing Library?

[adrai]

Maybe I'm not the right person to help with that, but what's the value of ctx.locale in the getServerSideProps function during the test?

[tuboihirokidesu]

@adrai
Thanks for the reply!
Until you pointed it out, ctx.locale was still ja, but when I created a new context object on language switch as follows, the result was the same...

  describe('getServerSideProps', async () => {
    const context = {
      req: httpMocks.createRequest<NextApiRequest>(),
      res: httpMocks.createResponse<NextApiResponse>(),
      params: undefined,
      query: {},
      resolvedUrl: '',
      locale: 'ja',
    }

    it('検索ラベルが表示されている', async () => {
      const result = await getServerSideProps(context)
      if (!('props' in result)) {
        throw new Error('Invalid result type')
      }

      const { getAllByTestId, i18n } = render(
        <Home
          loggedInUser={user}
          quotes={quotes}
          orders={orders}
          {...result.props}
        />,
      )

      const expectedText = i18n.t('parts:部品検索')
      const searchLabels = getAllByTestId('search-label')
      searchLabels.forEach((label) => {
        expect(label.textContent).toBe(expectedText)
      })
      expect(i18n.language).toBe('ja')

      // 英語テスト用に新しいcontextを作成
      const enContext = {
        ...context,
        locale: 'en',
      }
      const enResult = await getServerSideProps(enContext)
      if (!('props' in enResult)) {
        throw new Error('Invalid result type')
      }

      const { getAllByTestId: getAllByTestIdEn } = render(
        <Home
          loggedInUser={user}
          quotes={quotes}
          orders={orders}
          {...enResult.props}
        />,
      )

      await act(async () => {
        await i18n.changeLanguage('en')
      })

      const expectedTextEn = i18n.t('parts:部品検索')
      console.log('English text:', expectedTextEn)
      const searchLabelsEn = getAllByTestIdEn('search-label')
      searchLabelsEn.forEach((label) => {
        expect(label.textContent).toBe(expectedTextEn)
      })
      expect(i18n.language).toBe('en')
    })
}

[adrai]

Can you create a little simple repository we can use to play around with?