render wrapper error TS2769: No overload matches this call

[akornatskyy]

• @testing-library/react version: 12.1.1
• Testing Framework and version: [email protected]
• [email protected]

Relevant code or config:

import {MemoryRouter as Router} from 'react-router-dom';
// ...
render(<Whatever />, {wrapper: Router});

What you did:

Use Router as wrapper.

What happened:

typescript compile error.

Problem description:

 Overload 1 of 2, '(ui: ReactElement<any, string | JSXElementConstructor<any>>, options: RenderOptions<typeof import(".../node_modules/@testing-library/dom/types/queries"), HTMLElement>): RenderResult<...>', gave the following error.
Type 'typeof MemoryRouter' is not assignable to type 'ComponentType<{ children: ReactElement<any, string | JSXElementConstructor<any>>; }> | undefined'.
Type 'typeof MemoryRouter' is not assignable to type 'ComponentClass<{ children: ReactElement<any, string | JSXElementConstructor<any>>; }, any>'.
Types of parameters 'props' and 'props' are incompatible.
Type '{ children: ReactElement<any, string | JSXElementConstructor<any>>; }' is not assignable to type 'MemoryRouterProps | Readonly<MemoryRouterProps>'.
Type '{ children: ReactElement<any, string | JSXElementConstructor<any>>; }' has no properties in common with type 'Readonly<MemoryRouterProps>'.
Overload 2 of 2, '(ui: ReactElement<any, string | JSXElementConstructor<any>>, options?: Omit<RenderOptions<typeof import(".../node_modules/@testing-library/dom/types/queries"), HTMLElement>, "queries"> | undefined): RenderResult<...>', gave the following error.
Type 'typeof MemoryRouter' is not assignable to type 'ComponentType<{ children: ReactElement<any, string | JSXElementConstructor<any>>; }> | undefined'.
Type 'typeof MemoryRouter' is not assignable to type 'ComponentClass<{ children: ReactElement<any, string | JSXElementConstructor<any>>; }, any>'.

[akornatskyy]

That is still the issue with 12.1.2.

[akornatskyy]

@eps1lon : just in case you have missed the last comment above, this error still can be reproduced with 12.1.2 (I cannot reopen this issue). advise, please.

[eps1lon]

Thanks for the repro. This is something we'll have to fix in @types/react. Or maybe it's a TypeScript limitation. Will continue investigation later this week from Playground Link

[tb-viktor]

Have you managed to make some progress on this issue?

We are still getting it after upgrading. These are the relevant dependencies:

"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11",
"@types/react-router-dom": "^5.3.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^5.0.0",
"typescript": "4.3",

As in the description above, we've declared the MemoryRouter as the wrapper of our render:

render(<Component />, { wrapper: MemoryRouter });

Which makes TS throw the issue:

No overload matches this call.
  Overload 1 of 2, '(ui: ReactElement<any, string | JSXElementConstructor<any>>, options: RenderOptions<typeof import("C:/Users/Tomislav/viktor-frontend/node_modules/@testing-library/dom/types/queries"), HTMLElement>): RenderResult<...>', gave the following error.
    Type 'typeof MemoryRouter' is not assignable to type 'JSXElementConstructor<{ children: ReactElement<any, string | JSXElementConstructor<any>>; }> | undefined'.
      Type 'typeof MemoryRouter' is not assignable to type 'new (props: { children: ReactElement<any, string | JSXElementConstructor<any>>; }) => Component<any, any, any>'.
        Types of parameters 'props' and 'props' are incompatible.
          Type '{ children: ReactElement<any, string | JSXElementConstructor<any>>; }' is not assignable to type 'MemoryRouterProps | Readonly<MemoryRouterProps>'.
            Type '{ children: ReactElement<any, string | JSXElementConstructor<any>>; }' has no properties in common with type 'Readonly<MemoryRouterProps>'.
  Overload 2 of 2, '(ui: ReactElement<any, string | JSXElementConstructor<any>>, options?: Omit<RenderOptions<typeof import("C:/Users/Tomislav/viktor-frontend/node_modules/@testing-library/dom/types/queries"), HTMLElement>, "queries"> | undefined): RenderResult<...>', gave the following error.
    Type 'typeof MemoryRouter' is not assignable to type 'JSXElementConstructor<{ children: ReactElement<any, string | JSXElementConstructor<any>>; }> | undefined'.
      Type 'typeof MemoryRouter' is not assignable to type 'new (props: { children: ReactElement<any, string | JSXElementConstructor<any>>; }) => Component<any, any, any>'.ts(2769)

[eps1lon]

This issue was fixed as of @types/[email protected] and @testing-library/[email protected]:

import * as React from 'react';
import { render, screen } from '@testing-library/react';
import {MemoryRouter as Router} from 'react-router-dom';

function Whatever() {
    return null;
}

render(<Whatever />, {wrapper: Router});

Playground Link

If the issue persists please include a cloneable repository reproducing this issue. You may have to upgrade react-router-dom to the latest version.

[its-vincesanity]

In 18.2.0, I have the same Issue...