ESLint提示@testing-library/vue中找不到screen导入的解决方法

使用@testing-library/vue做组件测试时，从包中导入screen方法会触发ESLint报错，错误信息为"screen not found in @testing-library/vue"，同文件导入的render方法不会触发该报错，复现代码如下：

// render导入无报错，仅screen触发ESLint错误
import { render, screen } from '@testing-library/vue';

这个问题和@testing-library/vue的导出实现、ESLint的静态校验逻辑直接相关：

• 6.0以下版本的@testing-library/vue没有在入口文件做screen的静态重导出，screen是运行时从依赖@testing-library/dom动态挂载到导出对象上的。ESLint的import/named规则靠静态扫描分析代码导出关系，无法识别动态挂载的属性，因此判定screen不是包的合法导出项；而render是入口文件静态声明导出的方法，所以不会触发报错。
• 部分旧版本的类型定义文件提前补全了screen的TS类型，会出现TS类型校验不报错、仅ESLint报错的现象，和你推测的重导出识别问题一致，本质是静态扫描阶段找不到对应导出声明。

按优先级排序：

• 直接升级@testing-library/vue到6.0及以上稳定版，新版本已经在入口文件补全了screen的静态重导出，升级后不需要改任何业务代码、也不需要调整ESLint配置，报错会直接消失，执行对应安装命令即可：

  # 升级到最新兼容版本
  npm update @testing-library/vue
  # 或者直接安装最新正式版
  npm install @testing-library/vue@latest
  

• 如果受项目依赖限制暂时不能升级大版本，可以选以下任意一种临时方案：
  1. 拆分导入路径，render保持从@testing-library/vue导入，screen直接从底层依赖@testing-library/dom导入，两者搭配使用功能完全一致，不会有兼容问题：

     import { render } from '@testing-library/vue';
     import { screen } from '@testing-library/dom';
     

  2. 对单行导入关闭ESLint的命名导出校验，不需要调整原有导入写法，适合不想改动导入逻辑的场景：

     // eslint-disable-next-line import/named
     import { render, screen } from '@testing-library/vue';
     

内容的提问来源于stack exchange，提问作者Théo Lavaux