在使用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部分如下：
商汤商量
商汤科技研发的AI对话工具，商量商量，都能解决。
36 查看详情
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提示全局导入变量未定义，如何解决？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/271326.html
微信扫一扫 
支付宝扫一扫 
