There is multiple ways to setup a Custom Render that has already all your providers. Here you are going to see some sintax honey that will allows you to render your components using the React Testing Library, passing as options the providers you want to activate around that Component.
In this similar way:
renderUi(<Component />, { withReduxProvider: true, withReactQueryProvider: true, })
In this example we use some Providers that you might not use on your application, also you might use some other I’m not using here. Just addapt your code following this same pattern. The same goes for versions, this code might change on the basis of how this Libraries change their implementation.
Let’s continue.
First create our helper file in where we are going to make this possible:
Implementation
// this file simplifies the component setup process when rendering the component for testing import React from 'react'; import { render, RenderOptions } from '@testing-library/react'; import { Provider } from 'react-redux'; import { MemoryRouter as Router } from 'react-router-dom'; import { QueryClientProvider } from 'react-query'; import thunk from 'redux-thunk'; import configureStore from 'redux-mock-store'; import axios from 'axios'; import store from '/services/rootReducer'; import { createTestQueryClient } from '/services/test/utils'; interface IExtendedRenderOptions extends RenderOptions { withRouter?: boolean routerHistory?: string[] withRedux?: boolean mockInitialState?: any withQueryProvider?: boolean mockAxiosCalls?: any } // wrappers and contexts const wrapInRedux = (componentTree: JSX.Element, { mockInitialState }: IExtendedRenderOptions) => { const storeConfig = configureStore([thunk]); const storeMock = mockInitialState ? storeConfig(mockInitialState) : store; // This allows you to use a passed mock store return ( <Provider store={storeMock}> {componentTree} </Provider> ); }; const wrapInRouter = (componentTree: JSX.Element, routerHistory?: string[]) => ( <Router initialEntries={routerHistory}> {componentTree} </Router> ); const wrapInQueryProvider = (componentTree: JSX.Element) => { const testQueryClient = createTestQueryClient(); return ( <QueryClientProvider client={testQueryClient}> {componentTree} </QueryClientProvider> ); }; // You don't need this option if you are using something more advance such as Mock Service Worker // This Function Mock axios calls and hand back a response for each call finding the right response by comparing the called endpoint with the endpoint fragment you passed // You need to pass an array of objects, each object will represent a call // { endpointFragment: string, expectedMockResponse: yourMockType } type AxiosCallMock = { endpointFragment: string, expectedMockResponse: any } // This one will runs on each axios get request const mockAxiosCallResponsesIfAny = (renderOptions?: IExtendedRenderOptions) => { if (renderOptions?.mockAxiosCalls) { axios.get.mockImplementation((url) => { // If your component has multiple axios calls make sure to pass // endpoint fragments that identify them const optionObject = renderOptions?.mockAxiosCalls.find((mock: AxiosCallMock) => url.includes(mock.endpointFragment)); return Promise.resolve(optionObject.expectedMockResponse); }); } }; const setupComponent = (ui: JSX.Element, renderOptions?: IExtendedRenderOptions) => { if (!renderOptions) return ui; let componentTree = <>{ui}</>; if (renderOptions.withRouter) componentTree = wrapInRouter(componentTree, renderOptions.routerHistory); if (renderOptions.withRedux) componentTree = wrapInRedux(componentTree, renderOptions); if (renderOptions.withQueryProvider) componentTree = wrapInQueryProvider(componentTree); return componentTree; }; const customRender = (ui: JSX.Element, renderOptions?: IExtendedRenderOptions) => { try { mockAxiosCallResponsesIfAny(renderOptions); const componentTree = setupComponent(ui, renderOptions); return render(componentTree); } catch (error) { console.log(error); throw error; } }; export * from '@testing-library/react'; export { customRender, IExtendedRenderOptions };
Usage
This is how we render the component in our Test
// Component.test.tsx import React from 'react'; // we import out customRender import { customRender, screen, fireEvent, waitFor } from 'ns_libs/testing/testUtils'; import Component from 'pages'; const initialProps: IProps = { toggle: () => {}, isOpen: true, target: 'test-popover-target', feature: FEATURES_LIST.PORTFOLIO_GROUPS, subprojectId: 0, }; // initialize redux state with any value you want // maybe same values that is initialized in your app const initialReduxState = { user: { name: "", age: 0, } } const renderUi = (props: IProps = initialProps) => customRender( <Component {...props} />, { withRouter: true, routerHistory: [':some_path_maybe'], withRedux: true, mockInitialState: initialReduxState, }, );
This is an example of passing mock data on mock axios calls, if you still need to use that option to mock axios calls happening in your component:
import React from 'react'; import { customRender, screen, act, waitFor } from 'ns_libs/testing/testUtils'; import '@testing-library/jest-dom'; import axios from 'axios'; // Sample Component const SampleComponent = () => { const [data, setData] = React.useState<any>(); const [dataTwo, setDataTwo] = React.useState<any>(); const getTodos = async (): Promise<any> => { try { const res = await axios.get('https://yourendpoint.todos.com'); setData(res); } catch (error) { console.log(error); } }; const getOtherThings = async (): Promise<any> => { try { const res = await axios.get('https://endpoint.otherthings.com'); setDataTwo(res); } catch (error) { console.log(error); } }; React.useEffect(() => { getTodos(); getOtherThings(); }, []); return ( <div> {data && <h1>{data?.map((item: any) => <span key={item.email}>{item.title}</span>)}</h1>} {dataTwo && <h1>{dataTwo?.map((item: any) => <span key={item.email}>{item.title}</span>)}</h1>} </div> ); }; export default SampleComponent; // Here starts the test for Sample Component const ResponseMock: any = [ { endpointFragment: '/todos', expectedMockResponse: [ { title: 'Nice First Title', description: 'The todo is this', }, title: 'Nice Second Title', description: 'The todo is this', { }, ], }, { endpointFragment: '/otherthings', expectedMockResponse: [ { title: 'First Other', content: 0, }, { title: 'Second Other', content: 0, }, ], }, ]; const renderUi = () => customRender(<SampleComponent />, { mockAxiosCalls: ResponseMock, }); describe('Test Component', () => { afterEach(() => { jest.resetAllMocks(); }); test('First test', async () => { renderUi(); await waitFor(() => { const title = screen.getByText('Nice First Title'); const title2 = screen.getByText('Nice Second Title'); const title3 = screen.getByText('First Other'); const title4 = screen.getByText('Second Other'); expect(title).toBeInTheDocument(); expect(title2).toBeInTheDocument(); expect(title3).toBeInTheDocument(); expect(title4).toBeInTheDocument(); }); }); });
