如何结合Webpack url-loader正确运行Mocha测试？

你的问题核心在于：Webpack会通过对应的loader（比如mustache-loader）处理.mustache.template这类非JS文件，但Mocha默认只会解析JS/TS代码，直接运行时会把模板内容当成JS语法解析，导致出现Unexpected token错误。下面给你几个实用的解决方案，按推荐程度排序：

方案一：使用mocha-webpack（最推荐） #

mocha-webpack是专门把Mocha和Webpack结合的工具，它会复用你的Webpack配置来处理所有文件，和构建时的逻辑完全一致，不用额外修改太多配置。

1. 首先安装依赖：

npm install mocha-webpack --save-dev

2. 修改你的test脚本，替换原来的mocha为mocha-webpack，并指定Webpack配置文件：

"test": "cross-env NODE_PATH=$NODE_PATH:./src NODE_ENV=test nyc mocha-webpack --timeout 30000 --exit \"../src/**/*.test.js\" --webpack-config scripts/webpack.build.config.js"

这样运行npm run test时，mocha-webpack会用你现有的webpack.build.config.js来处理Mustache模板（以及其他Webpack能处理的文件），就不会再出现语法错误了。

方案二：自定义Mocha的文件处理钩子 #

如果不想引入新工具，可以通过require.extensions来告诉Mocha如何解析Mustache模板文件：

1. 在项目根目录创建一个test-setup.js文件，内容如下：

// 先加载babel-register处理ES6+语法
require('babel-register');

// 处理.mustache.template文件，导入时直接返回文件的文本内容
const fs = require('fs');
require.extensions['.mustache.template'] = function(module, filename) {
  module.exports = fs.readFileSync(filename, 'utf8');
};

2. 修改test脚本，添加--require ./test-setup.js来引入这个配置：

"test": "cross-env NODE_PATH=$NODE_PATH:./src NODE_ENV=test nyc mocha --timeout 30000 --exit \"../src/**/*.test.js\" --require ./test-setup.js --require babel-polyfill"

这个方案的优点是轻量，但如果你的项目里还有其他非JS文件（比如CSS、图片），需要在test-setup.js里逐个添加对应的处理逻辑。

方案三：先用Webpack打包测试代码，再用Mocha运行 #

这种方式完全复用Webpack的构建逻辑，把测试代码和依赖打包成一个JS文件，再用Mocha运行：

1. 复制你的webpack.build.config.js，创建一个webpack.test.config.js，调整入口为你的测试文件，输出到临时目录（比如./dist/test-bundle.js）：

// scripts/webpack.test.config.js
const path = require('path');

module.exports = {
  mode: 'test',
  entry: '../src/**/*.test.js', // 或者指定测试入口文件
  output: {
    filename: 'test-bundle.js',
    path: path.resolve(__dirname, '../dist')
  },
  // 复制你webpack.build.config.js里的loader、plugins等配置，确保包含mustache-loader
  module: {
    rules: [
      // ...其他loader
      {
        test: /\.mustache\.template$/,
        use: 'mustache-loader'
      }
    ]
  }
};

2. 修改test脚本，先打包再运行：

"test": "cross-env NODE_ENV=test webpack --config scripts/webpack.test.config.js && nyc mocha --timeout 30000 --exit ./dist/test-bundle.js"

这个方案的好处是和构建环境完全一致，但会多一个打包步骤，测试运行时间会变长，适合复杂场景。

内容的提问来源于stack exchange，提问作者Владислав Бублик