ESLint 在从 @testing-library/react 导入屏幕时显示错误

Question

从

@testing-library/react

导入 screen 函数时，ESLint 显示以下错误：

ESLint：在“@testing-library/react”（导入/命名）中找不到屏幕

// render is imported properly
import { render, screen } from '@testing-library/react';

测试运行正常，全部通过，但是Typescript ESLint仍然显示红色指示器。

还尝试添加

{
  "compilerOptions": {
    ...,
    "types": ["@testing-library/react"]
  },
  ...
}

但是没有成功。

更新[2022-08-25]：

我也在使用 eslint-plugin-testing-library。

  extends: [..., 'plugin:testing-library/react'],
  plugins: [..., 'testing-library'],

Answer 1

我也有类似的问题。即使我按照上面建议的 @vishal-rajole 安装了

eslint-plugin-testing-library

，我仍然收到此错误：

ByRoleMatcher not found in '@testing-library/react' eslint(import/named)

有趣的是，我的导入声明是这样的

import { ByRoleMatcher, render, screen } from '@testing-library/react';

ByRoleMatcher

出错，但

render

和

screen

导入正常。于是我打开

.eslintrc.js

看看是否有什么不同。它看起来像这样：

module.exports = {
  extends: [
    // By extending from a plugin config, we can get recommended rules without having to add them manually.
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:import/recommended',
    'plugin:jsx-a11y/recommended',
    'plugin:@typescript-eslint/recommended',
    // This disables the formatting rules in ESLint that Prettier is going to be responsible for handling.
    // Make sure it's always the last config, so it gets the chance to override other configs.
    'eslint-config-prettier',
  ],
...

注意到

'plugin:react/recommended'

的存在，我将以下内容添加到该列表中并重新启动 VSCode。

'plugin:testing-library/recommended',

错误消失了。所以也许你需要将其添加到你的

.eslintrc.js

文件中 @rickcardoso:

'plugin:react/recommended'