Playwright Component Testing with ContextApi

Question

I have created a small React app and I want to test it using Playwright component testing

I have 3 components: App -> ChildComponent -> ChildChildComponent I want to render (mount) the ChildComponent directly, and make assertions on it, but when I do that, some ContextApi functions that are defined in the App in the normal flow, are now undefined as the App component is not part of the component test. So i'v trying to render the ChildComponent together with a face ContextApi Provider and pass mocks of those undefined functions, and then I get an infinite render loop for some reason.

How can I go about this, as this use case is typical in react component test. Here is the test with all my failed mocking attempts separated:

test.only("validate CharacterModal", async ({ page, mount }) => {
  const data = ['some-mocked-irrelevant-data']

  // const setCurrentCharacter = () => {};
  // const setIsCharacterModalOpen = () => {};
  // const setCurrentCharacterMocked = sinon.stub("setCurrentCharacter").callsFake(() => {});
  // const setIsCharacterModalOpenMocked = sinon.stub("setCurrentCharacter").callsFake(() => {});
  
  // const setCurrentCharacter = jest.fn();
  // const setIsCharacterModalOpen = jest.fn();

  // const setCurrentCharacter = (): void => {};
  // const setIsCharacterModalOpen = (): void => {};

  // const setIsCharacterModalOpen = (isCharacterModalOpen: boolean): void => {};

  const AppContext = React.createContext<any>(null);
  await page.route("**/users*", async (route) => {
    await route.fulfill({
      status: 200,
      contentType: "application/json",
      body: JSON.stringify(data),
    });
  });

  const component = await mount(
    <AppContext.Provider value={{ setCurrentCharacterMocked, setIsCharacterModalOpenMocked }}>
      <CharacterModal />
    </AppContext.Provider>
  );

  expect(await component.getByRole("img").count()).toEqual(4);
});

Answer 1

The beforeMount hook can be used for this. I recently added docs about this: https://github.com/microsoft/playwright/pull/20593/files.

 // playwright/index.jsx
 import { beforeMount, afterMount } from '@playwright/experimental-ct-react/hooks';

 // NOTE: It's probably better to use a real context
 const AppContext = React.createContext(null);

 beforeMount(async ({ App, hooksConfig }) => {
   if (hooksConfig?.overrides) {
     return (
       <AppContext.Provider value={hooksConfig.overrides}>
         <App />
       </AppContext.Provider>
     );
   }
 });

// src/CharacterModal.test.jsx
import { test, expect } from '@playwright/experimental-ct-react';
import { CharacterModal } from './CharacterModal';

test('configure context through hooks config', async ({ page, mount }) => {
  const component = await mount(<CharacterModal />, {
    hooksConfig: { overrides: 'this is given to the context' },
  });
});