如何在Jest测试文件中跳过导入React？解决Testing-Library的ESLint报错

方案一：直接跳过测试文件中的React导入 #

从React 17开始，JSX转换的新机制已经不需要手动导入React就能使用JSX，测试场景下同样适用。直接删掉所有测试文件里的import React from 'react'即可——React Testing Library的render、screen等方法内部已经处理了React的依赖，删除导入后测试代码完全能正常运行，同时彻底解决ESLint的导入顺序报错。

方案二：调整ESLint导入顺序规则（保留React导入时用） #

如果因为特殊需求必须保留React导入，可通过修改ESLint配置来解决报错：

方法1：针对测试文件禁用导入顺序规则 #

在你的ESLint配置文件（比如.eslintrc.js）中添加测试文件的规则覆盖：

module.exports = {
  // 其他全局配置
  overrides: [
    {
      files: ['**/__tests__/**/*.js', '**/*.test.js', '**/*.spec.js'], // 匹配所有测试文件
      rules: {
        'import/order': 'off' // 关闭测试文件的导入顺序检查
      }
    }
  ]
}

方法2：精细调整规则，让@testing-library包优先导入 #

如果不想完全禁用规则，可配置让@testing-library开头的包排在React前面：

module.exports = {
  // 其他全局配置
  rules: {
    'import/order': [
      'error',
      {
        groups: ['builtin', 'external', 'internal'],
        pathGroups: [
          {
            pattern: '@testing-library/**',
            group: 'external',
            position: 'before' // 让@testing-library包排在其他外部包前面
          }
        ],
        pathGroupsExcludedImportTypes: ['react']
      }
    ]
  }
}

优先推荐方案一，既符合React 17+的特性，又能最简洁地解决问题。

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