Type conflicts in testing-library vs react

[ErinGreenhalgh]

• @testing-library/react version: 12.1.2
• Testing Framework and version: Jest 27.4.5
• DOM Environment: jsdom: 16.6.0 react: 17.0.2

What you did:

My team is not yet ready to upgrade to react 18, but I'd like to keep @testing-library/react as up to date as possible, so I'm trying to upgrade from 12.1.2 to 12.1.5.

What happened:

yarn upgrade @testing-library/react
yarn build

Found 177 errors in 2 files.

Errors  Files
   176  node_modules/@testing-library/react/node_modules/@types/react/index.d.ts:3085
     1  node_modules/@types/react/index.d.ts:3100

All the errors are related to type conflicts in react vs testing-library. Almost all of them are error TS2717:

node_modules/@testing-library/react/node_modules/@types/react/index.d.ts:3273:13 - error TS2717: Subsequent property declarations must have the same type.  Property 'view' must be of type 'SVGProps<SVGViewElement>', but here has type 'SVGProps<SVGViewElement>'.

3273             view: React.SVGProps<SVGViewElement>;
                 ~~~~

  node_modules/@types/react/index.d.ts:3288:13
    3288             view: React.SVGProps<SVGViewElement>;
                     ~~~~
    'view' was also declared here.

There is also one duplicate identifier error:

node_modules/@types/react/index.d.ts:3100:14 - error TS2300: Duplicate identifier 'LibraryManagedAttributes'.

3100         type LibraryManagedAttributes<C, P> = C extends React.MemoExoticComponent<infer T> | React.LazyExoticComponent<infer T>
                  ~~~~~~~~~~~~~~~~~~~~~~~~

  node_modules/@testing-library/react/node_modules/@types/react/index.d.ts:3085:14
    3085         type LibraryManagedAttributes<C, P> = C extends React.MemoExoticComponent<infer T> | React.LazyExoticComponent<infer T>
                      ~~~~~~~~~~~~~~~~~~~~~~~~
    'LibraryManagedAttributes' was also declared here.

Problem description:

I expect to be able to upgrade testing-library without type conflicts.

Suggested solution:

I am not sure if this issue is a bug within testing-library, or some kind of dependency collision within my setup. I have tried upgrading @types/react but this results in even more errors.

[eps1lon]

We need to move @types/react-dom to (optional) peer dependencies. Though this is technically a breaking change even though it rarely is practically. I'll read up again on prior discussions.

In the meantime, make sure you only have a single version of @types/react and @types/react-dom installed. https://github.com/facebook/react/issues/24304 includes a couple of workarounds.

[ErinGreenhalgh]

@eps1lon will do, thank you!

[nickserv]

I'm in favor of using optional peer dependencies too, as I've had module not found errors using Testing Library packages with strict package managers (pnpm, npm without the default install-strategy, and Yarn with nodeLinker: "pnp").

[nickserv]

Actually this might be a duplicate of #1103. @eps1lon what do you think?

[eps1lon]

It's about different dependencies so I wouldn't consider this a duplicate issue.