Is it possible to wrap each individual test in a wrapper component? - reactjs

Question

I am using material-UI components in my React components. Therefore I will need to apply the <MuiThemeProvider></MuiThemeProvider> component around all my components in my tests.
My components are located in individual folders:
./src/components/Header/Header.tsx
./src/components/Header/Header.test.ts
./src/components/Header/...
./src/components/Footer/Footer.tsx
./src/components/Footer/Footer.test.ts
./src/components/Footer/...
// etc.
A test would have to look like the following:
import React from 'react';
import { render } from '#testing-library/react';
import Header from './Header';
it('matches snapshot', () => {
const container = render(
// This theme provider is necessary since my components depend on it.
// But rather don't want to include this in all my components.
<MuiThemeProvider theme={theme}>
<Header />
</MuiThemeProvider>
);
expect(container).toMatchSnapshot();
});
But now I'd have to define the MuiThemeProvider in each of my tests.
Is it possible to do this once for all my tests?

Answer 1

Found it: https://testing-library.com/docs/react-testing-library/setup
Turns out it's a react-testing-library thing.
You can modify the render function to wrap a component (provider) in the render method.
Simply change the import of the render function:
Create the function containing with the 'wrapper' component:
// test-utils.js
import { render } from '#testing-library/react'
import { ThemeProvider } from 'my-ui-lib'
import { TranslationProvider } from 'my-i18n-lib'
import defaultStrings from 'i18n/en-x-default'
const AllTheProviders = ({ children }) => {
return (
<ThemeProvider theme="light"> // here it is
<TranslationProvider messages={defaultStrings}>
{children}
</TranslationProvider>
</ThemeProvider>
)
}
const customRender = (ui, options) =>
render(ui, { wrapper: AllTheProviders, ...options })
// re-export everything
export * from '#testing-library/react'
// override render method
export { customRender as render }
And then start using it like this:
// my-component.test.js
- import { render, fireEvent } from '#testing-library/react';
+ import { render, fireEvent } from '../test-utils';

Answer 2

You can mock your higher-order component using jest.mock.
It can something like following
jest.mock("hoc-module", () => {
return {
hocFunction: function(hocConf) {
return function(component) {
component.defaultProps = {
...component.defaultProps,
mockPropKey: mockPropValue
};
return component;
};
}
};
});
P.S: I wrote the above code on the fly.