Testing react component that is dependent on Stateful Context Providers chain in React Testing Library

Question

I'm aware of this, but it's not my case.

Example:

<AuthProvider>
  <SessionProvider>
    <AnotherProvider>
      <OneMoreProvider>
        <MyComponent />

All of these providers are actually regular React Components with state and effects, that fetch some data via GraphQL and pass that data as a 'value' prop to MyContext.Provider in return statement.

This enforces me to create lots of mocks for modules that are being used in all of these providers, just to render my own component in testing env.

Any thoughts about what can be done to avoid creating so many mocks?

Do you need to use variables that comes from the context providers in your tests? — onuriltan, Jun 27 '20 at 21:38

score 1 · Answer 1 · answered Jun 28 '20 at 01:03

You can create a helper test lib with a custom render function that wrap your component with the contexts then export all react testing library methods from there

- test/lib.jsx

import React from 'react';
import { render as reactRender } from '@testing-library/react';
export * from '@testing-library/react';

export const render = (MyComponent, options) => {
    return reactRender(
        <AuthProvider>
            <SessionProvider>
                <AnotherProvider>
                    <OneMoreProvider>
                        {MyComponent}
                    </OneMoreProvider>
                </AnotherProvider>
            </SessionProvider>
        </AuthProvider>,
        options
    )
}

Then use this helper lib to import test functions instead of using @testing-library/react directly


import { render } from 'test/lib'
import MyComponent from './MyComponent';

test("My component", () => {
    const { getByTestId, ... } = render(<MyComponent>);
    ...
});

Testing react component that is dependent on Stateful Context Providers chain in React Testing Library

1 Answers1