使用Mocha测试React组件时如何解决‘Cannot find module’错误

完全不用为了测试重构所有组件的导入语句，我们可以通过配置测试环境的模块解析规则来解决这个问题，下面是几个常用的方案：

方案1：使用Babel插件配置路径别名（最通用） #

如果你的项目已经在用Babel编译代码，babel-plugin-module-resolver插件可以帮你把根路径式的导入映射成正确的相对路径，Mocha通过Babel编译测试文件后就能识别这些导入了。

• 首先安装插件：

  npm install --save-dev babel-plugin-module-resolver
  

• 然后在你的Babel配置文件（比如.babelrc、babel.config.json）中添加配置：

  {
    "plugins": [
      ["module-resolver", {
        "root": ["./"], // 把项目根目录设为模块查找的根
        "alias": {
          "components": "./components" // 直接映射components目录的路径
        }
      }]
    ]
  }
  

  这样不管是开发环境还是测试环境，import PrevArrow from 'components/Slider/PrevArrow'都会被正确解析为项目根目录下的./components/Slider/PrevArrow。

方案2：直接给Mocha指定模块查找路径 #

如果你的项目没有用Babel，或者不想额外加插件，可以直接在Mocha的启动命令中添加--paths参数，告诉它哪些目录是模块查找的根目录。

• 先安装esm包（用来让Mocha支持ES模块语法，如果你的项目用的是CommonJS可以跳过这步）：

  npm install --save-dev esm
  

• 然后修改package.json中的测试脚本：

  "scripts": {
    "test": "mocha --require esm --paths ./ ./test/**/*.test.js"
  }
  

  这里的--paths ./表示把项目根目录设为模块查找的根，Mocha就会从这里开始寻找components/Slider/PrevArrow模块了。如果你的components目录在src下，可以把路径改成--paths ./src。

方案3：TypeScript项目专用：利用tsconfig的路径配置 #

如果你的项目是TypeScript，并且已经在tsconfig.json中配置了baseUrl和paths，可以用tsconfig-paths让Mocha识别这些配置：

• 安装依赖：

  npm install --save-dev tsconfig-paths ts-node
  

• 修改测试脚本：

  "scripts": {
    "test": "mocha --require ts-node/register --require tsconfig-paths/register ./test/**/*.test.ts"
  }
  

  这样Mocha会自动读取tsconfig.json中的路径配置，解析你的根路径导入语句，不用额外修改代码。

这些方案都能让你保留原来的导入语句，不用为了测试去重构代码，选最适合你项目技术栈的就行~

内容的提问来源于stack exchange，提问作者Michael Ploeckinger