在使用Vite开发React项目并进行测试时，经常会遇到ESLint提示全局导入变量未定义的问题。例如，使用@testing-library/jest-dom导入的测试辅助函数在测试文件中使用时，ESLint会报错“未定义”。本文将介绍如何解决这个问题，使ESLint正确识别全局变量，避免无意义的警告。
根本原因在于ESLint无法自动识别Vite或测试环境（如Vitest）全局注入的变量。即使在vite.config.js中设置了globals: true，也只是告知Vite在构建过程中处理全局变量，ESLint仍然需要额外配置才能识别它们。
主要解决方法有两种：
方法一：修改.eslintrc.cjs文件的env配置
目前.eslintrc.cjs的env配置可能已包含browser: true和es2020: true，但这还不够。需要根据使用的测试运行器添加相应配置，例如：jest: true（如果使用Jest）或"mocha": true（如果使用Mocha）。这将启用相应环境预设，从而识别这些环境中预定义的全局变量，包括@testing-library/jest-dom等库注入的变量。修改后的.eslintrc.cjs文件env部分如下：
env: {
browser: true,
es2020: true,
jest: true // 或 "mocha": true
},方法二：在.eslintrc.cjs文件中使用globals选项显式声明全局变量
如果方法一无效，则可通过globals选项显式声明所有需要ESLint识别的全局变量。例如，@testing-library/jest-dom导入了screen变量，则在globals中声明：
globals: {
screen: 'readonly', // 或其他需要声明的全局变量
},readonly表示变量只读，防止意外修改。 此方法需要手动维护globals列表，添加新全局变量时需及时更新配置。
选择哪种方法取决于项目规模和复杂度以及对测试框架的依赖。大型项目推荐方法一，小型项目方法二可能更方便。
以上就是Vite React项目中，ESLint提示全局导入变量未定义，如何解决？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
738
