After seting up with pnpm, thne, when it runs, there is an error 'Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>' in App.test.tsx

[hsk-kr]

trafficstars

Describe the bug

After setting up with pnpm with an option auto-install-peers=true, there was an error in App.test.tsx.

Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'.ts(2339)

Did you try recovering your dependencies?

I know you're officially supporting cra with npm or yarn. but after installing a package @types/testing-library__jest-dom it looks working well. I hope if it would be easy to solve, you care about it for pnpm users.

Which terms did you search for in User Guide?

Environment

Windows 10, pnpm 7.5

Steps to reproduce

(Write your steps here:)

1. Run a command pnpm create react-app [project-name] --template typescript
2. Delete package-lock.json and node_modules.
3. Run a command pnpm install
4. Run a command pnpm start

Expected behavior

Runs an app without errors

Actual behavior

there was an error in App.test.tsx.

Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'.ts(2339)

Reproducible demo

[zhyd1997]

this solution works for me: https://github.com/testing-library/jest-dom/issues/442#issuecomment-1163011282

[PAStheLoD]

Using CRA TS with yarn 4.0.0-rc.22 (with PnP, on Linux in WSL2) leads to the same issue, the originally mentioned workaround of adding the extra type package works.

yarn add @types/testing-library__jest-dom

Updating @testing-library/jest-dom, or typescript, or @types/jest did not help (but also did not break things). Also I did not have to edit setupTests.ts.

[MattYoooo]

This one should be the solution: https://github.com/pnpm/pnpm/issues/4920#issuecomment-1226724790

[itayperry]

I'm having the same issue :)

This one should be the solution: pnpm/pnpm#4920 (comment)

This worked for me 🚀

[itayperry]

It's important to mention what pnpm docs say about public-hoist-pattern:

"This setting is useful when dealing with some flawed pluggable tools that don't resolve dependencies properly."

https://pnpm.io/npmrc#public-hoist-pattern

[KutnerUri]

Perhaps just installing @types/testing-library__jest-dom as a dev dep would solve this? (as suggested in the opening post by @hsk-kr)

Seems like a simple enough solution, and I can confirm it works:

pnpm add -D @types/testing-library__jest-dom

...

Compiled successfully!

You can now view bug-test in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.104:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully
No issues found.

Should be built it.

[AlainBartmanDilaw]

Perhaps just installing @types/testing-library__jest-dom as a dev dep would solve this, as mentioned at the opening post? Seems like a simple enough solution, and I can confirm it works:

pnpm add -D @types/testing-library__jest-dom

...

Compiled successfully!

You can now view bug-test in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.104:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully
No issues found.

Works for me ! Thanks

[maxscn]

For me it was that the version of @testing-library/jest-dom was set to 5 (ish) and once I tried installing the types (@types/testing-library__jest-dom) they were version 6, which had removed all type definitions.

Took a while to find it so posting it here in case anyone else needs it.

[bdombro]

None of the tips above helped me except for @MaximilianSchon's that maybe check your jest versions.

Updating @testing-library/jest-dom from 5 to ^6.2.0 finally fixed the issue for me.