create-react-app 在设置了pnpm之后,当它运行时,出现了一个错误:“属性'toBeInTheDocument'不存在于类型'JestMatchers< HTMLElement>'中,位于App.test.tsx文件中,”

s4chpxco  于 6个月前  发布在  React
关注(0)|答案(9)|浏览(72)

描述bug

在设置了 pnpm 并选择了 auto-install-peers=true 选项后,App.test.tsx 出现了错误。

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

你是否尝试恢复依赖项?

我知道你官方支持使用 npm 或 yarn 进行 cra。但是在安装了一个包 @types/testing-library__jest-dom 之后,它似乎运行良好。我希望如果这个问题容易解决的话,你能为 pnpm 用户考虑一下。

在用户指南中搜索了哪些术语?

环境

Windows 10,pnpm 7.5

重现步骤

(请写下你的步骤:)

  1. 运行命令 pnpm create react-app [project-name] --template typescript
  2. 删除 package-lock.json 和 node_modules。
  3. 运行命令 pnpm install
  4. 运行命令 pnpm start

预期行为

无错误地运行应用程序。

实际行为

App.test.tsx 出现了错误。

f0ofjuux

f0ofjuux1#

这个解决方案对我有效:testing-library/jest-dom#442 (评论)

9rbhqvlz

9rbhqvlz2#

使用CRA TS与yarn 4.0.0-rc.22(在Linux的WSL2中使用PnP)会导致相同的问题,最初提到的添加额外类型包的解决方法有效。

yarn add @types/testing-library__jest-dom

更新@testing-library/jest-dom、typescript或@types/jest没有帮助(但也没有破坏事物)。此外,我不需要编辑setupTests.ts。

mbjcgjjk

mbjcgjjk3#

这个应该是解决方案:pnpm/pnpm#4920 (评论)

qnzebej0

qnzebej04#

我遇到了同样的问题:)
这个应该是解决方案:pnpm/pnpm#4920 (评论)
这个对我有用 🚀

disbfnqx

disbfnqx5#

关于public-hoist-pattern,以下是pnpm文档中的说明:
"当处理某些存在缺陷的可插拔工具时,此设置非常有用,因为它们不能正确解决依赖关系。"
https://pnpm.io/npmrc#public-hoist-pattern

4xy9mtcn

4xy9mtcn6#

也许只需将 @types/testing-library__jest-dom 作为开发依赖项进行安装就可以解决这个问题?(如@hsk-kr在开头的帖子中建议)

这似乎是一个足够简单的解决方案,我可以确认它有效:

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.

应该构建它。

h7wcgrx3

h7wcgrx37#

也许只需将 @types/testing-library__jest-dom 作为开发依赖项进行安装,就可以解决这个问题,正如在开头的帖子中提到的那样?这似乎是一个足够简单的解决方案,我可以确认它有效:

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.

对我有效!谢谢

ax6ht2ek

ax6ht2ek8#

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.

zujrkrfu

zujrkrfu9#

以上所有提示都无法帮助我,除了@MaximilianSchon的建议,也许可以检查你的jest版本。
@testing-library/jest-dom从5更新到^6.2.0终于解决了我的问题。

相关问题