Jest, RTL, @apollo/client/testing, test failures, Element type is invalid: expected a string

[SvmkWebplatDevs]

Issue Description

Setup a test-utils directory to load providers we utilize to manage react themes with JSS. Outlined by RTL here, https://testing-library.com/docs/react-testing-library/setup/. Our custom render is setup like

const customRender = (
  ui: React.ReactElement<
    unknown,
    string | React.JSXElementConstructor<unknown>
  >,
  sheets?: SheetsRegistry,
  options?: RenderOptions
) => {
  const styleSheet = sheets ?? new SheetsRegistry();
  return render(ui, {
    wrapper: () => <AllTheProviders sheets={styleSheet}>{ui}</AllTheProviders>,
    ...options,
  });
};

the AllTheProviders component is just a wrapper that also includes a theme provider and children .

Any component that runs MockedProvider runs into this failure.

 Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

=> {
      43 |   const styleSheet = sheets ?? new SheetsRegistry();
    > 44 |   return render(ui, {
         |                ^
      45 |     wrapper: () => <AllTheProviders sheets={styleSheet}>{ui}</AllTheProviders>,
      46 |     ...options,
      47 |   });

We are locked to 3.3 due to this issue. I can confirm that anything after 3.4 has seen this issue.

Link to Reproduction

https://bug-free-space-spoon-97776ww9vwqwf7vjp.github.dev/

Reproduction Steps

Setup a jest, jss, rtl, and apollo-client ^3.3.16

[phryneas]

Unfortunately, I cannot access your codespace.

What I can say is that our own tests (which are based on jest and RTL) are using MockProvider in hundreds of places, and of course we are running our tests also in current versions - so this seems like a problem in your setup.

Can you do a npm why @apollo/client or a yarn why @apollo/client to make sure you don't accidentally have two slightly different versions of Apollo Client installed in parallel? That's the best shot in the dark I can take right now.

[SvmkWebplatDevs]

We've hard pinned to 3.3.16 because of the issue. Can confirm we don't have more then one version installed. While I agree that you have installs using MockedProvider and RTL, I did highlight that our setup is a little different with the need of JSS and their ThemeProvider. In all cases, the problem seems to be associated to when we include the MockedProvider in a component that is utilizing our test-utils jest file and only then. Which makes me believe that something between rtl and apollo isn't playing well. Our setup isn't really different then the link I provided earlier.

[phryneas]

I really cannot say anything without being able to see your setup, but I can assure you that thousands of developers use MockedProvider with jest, and I'm very sure that you are not the only ones using JSS or ThemeProvider.

[github-actions]

We're closing this issue now but feel free to ping the maintainers or open a new issue if you still need support. Thank you!

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
For general questions, we recommend using StackOverflow or our discord server.