Webstorm使用@testing-react-library时提示getByTestId未定义如何解决？

这个报错属于Webstorm编辑器的类型识别问题，和代码本身逻辑无关，所以你的测试代码可以正常运行，按以下步骤操作即可解决：

• 第一步：安装完整的依赖类型包
  如果是TypeScript项目，先确认是否安装了测试库对应的类型声明包，执行以下命令安装：
  npm install @types/testing-library__jest-dom @types/testing-library__react -D
  如果使用yarn作为包管理器，执行：
  yarn add @types/testing-library__jest-dom @types/testing-library__react -D
• 第二步：配置类型识别规则
  • TypeScript项目：在项目根目录的tsconfig.json（如果有测试专属的tsconfig.test.json优先修改这个文件）的compilerOptions.types数组中加入测试库的类型声明：

  "types": ["jest", "@testing-library/jest-dom", "@testing-library/react"]

  • JavaScript项目：在根目录新建jsconfig.json文件，添加如下配置：

  {
    "compilerOptions": {
      "types": ["jest", "@testing-library/jest-dom", "@testing-library/react"]
    },
    "include": ["src/**/*.test.js", "src/**/*.test.jsx"]
  }
  

• 第三步：临时快速修复
  如果不想修改全局配置，可以直接在用到相关方法的测试文件顶部显式导入对应方法，Webstorm即可直接识别：
  import { getByTestId } from '@testing-library/react'
• 第四步：重启编辑器清除缓存
  如果配置完成后仍有报错，清除Webstorm缓存并重启即可：
  1. 点击顶部菜单栏 File → Invalidate Caches...
  2. 勾选 Clear file system cache and local history 选项
  3. 点击 Invalidate and Restart 等待编辑器重启完成即可

内容的提问来源于stack exchange，提问作者Vlad