[BUG] undefined: Maximum call stack size exceeded with I18nextProvider

[zkrzyzanowski]

Context:

• Playwright Version: 1.26.1
• Operating System: mac
• Node.js version: 16.17.0
• Browser: chromium
• Extra:

Code Snippet

import { test, expect } from '@playwright/experimental-ct-react';
import SomeComponent from '../../components/some_component';
import { I18nextProvider } from 'react-i18next';
import i18n from '../../i18n/i18n';

test.use({ viewport: { width: 500, height: 500 } });

test('should work', async ({ mount }) => {
  const component = await mount(
    <I18nextProvider i18n={i18n}>
      <SomeComponent />
    </I18nextProvider>
  );

  await expect(component).toContainText('some text here');
});

Describe the bug

When running a component test using I18nextProvider from react-i18next, I'd expect the provider to be available and translated text to be shown.

playwright test

expected:
• passing test

actual:

Running 1 test using 1 worker

  ✘  1 [chromium] › tests/components/component.spec.tsx:9:1 › should work (1s)


  1) [chromium] › tests/components/component.spec.tsx:9:1 › should work ======

    undefined: Maximum call stack size exceeded

       at ../../node_modules/.pnpm/@playwright+test@1.26.1/node_modules/@playwright/test/lib/mount.js:48

      46 |   }, use) => {
      47 |     await use(async (component, options) => {
    > 48 |       const selector = await page._wrapApiCall(async () => {
         |                                   ^
      49 |         return await innerMount(page, component, options);
      50 |       }, true);
      51 |       const locator = page.locator(selector);

     

[zkrzyzanowski]

Figured it out based on this issue

Moving the provider out to its own tsx file like so

import { I18nextProvider } from 'react-i18next';
import i18n from '../../i18n/i18n';

export const WrappedComponent = ({ children }: { children: JSX.Element }) => {
  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
};

and WrappedComponent into the .spec.tsx file allows the test to pass successfully.