I am writing test case to test my homepage but jest giving error while compiling the code and breaks at helmet tag.

I searched and found out that I should replace react-helmet with react-helmet-async and use HelmetProvider.

Now I am stuck at below error.

console.error
    The above error occurred in the <HelmetDispatcher> component:
    
        at construct (/Users/utkarshgupta/Documents/Fynd/quintessa/node_modules/react-helmet-async/src/Dispatcher.js:8:22)
        at construct (/Users/utkarshgupta/Documents/Fynd/quintessa/node_modules/react-helmet-async/src/index.js:15:14)
        at div
        at App
        at construct (/Users/utkarshgupta/Documents/Fynd/quintessa/node_modules/react-helmet-async/src/Provider.js:37:5)
        at construct (/Users/utkarshgupta/Documents/Fynd/quintessa/node_modules/react-router/cjs/react-router.js:113:30)
        at construct (/Users/utkarshgupta/Documents/Fynd/quintessa/node_modules/react-router/cjs/react-router.js:202:35)
        at fn (/Users/utkarshgupta/Documents/Fynd/quintessa/node_modules/react-query/lib/react/QueryClientProvider.js:45:21)
        at fn (/Users/utkarshgupta/Documents/Fynd/quintessa/node_modules/react-redux/lib/components/Provider.js:21:20)
        at fn (/Users/utkarshgupta/Documents/Fynd/quintessa/src/__test__/helpers/test-utils.js:28:22)

I am using custom SSR so, I have wrapped render to string elements in HelmetProvider.

My render function :

export const render = (
  ui,
  {
    initialState = initialReducerState,
    store = createStore(rootReducer, initialState),
    ...renderOptions
  } = {}
) => {
  const Wrapper = ({ children }) => (
    <Provider store={store}>
      <QueryClientProvider client={queryClient} contextSharing={true}>
        <Router>
          <HelmetProvider>{children}</HelmetProvider>
        </Router>
      </QueryClientProvider>
    </Provider>
  );

  return {
    ...rtlRender(ui, {
      wrapper: Wrapper,
      ...renderOptions,
    }),
    store,
  };
};

SSR JSX:

let jsx = extractor.collectChunks(
  <Provider store={store}>
    <QueryClientProvider client={queryClient}>
      <Hydrate state={dehydratedState}>
        <StaticRouter location={req.originalUrl} context={null}>
          <HelmetProvider context={helmetContext}>
            <App />
          </HelmetProvider>
        </StaticRouter>
      </Hydrate>
    </QueryClientProvider>
  </Provider>
); 

The above error not letting me to test all pages which use Helmet and other seo tags in react components.