How to fix the error 'ReferenceError: Can't find variable: require' when running unit test in Karma, Webpack, PhantomJS

Question

我可能会使用 Karma、Webpack、enzyme、PhantomJS 来测试我的 React 项目。当我 运行 下面命令 运行 测试用例时，

./node_modules/karma/bin/karma start config/karma.conf.js --single-run --browsers PhantomJS

我遇到以下错误：

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  ReferenceError: Can't find variable: require
  at /dev/test/test.js:3

在test.js的源代码的第3行，我没有使用require，下面是代码：

import { expect } from 'chai'; 

我想知道为什么 PhantomJS 会报错。

下面是我的 karma conf 文件：

var path = require('path');
var webpackconf = require("./webpack.config")

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['mocha', 'chai'],
    files: [
      '../test/**/*.js'
    ],

    preprocessors: {
      // add webpack as preprocessor
      '../src/**/*.js': ['babel'],
      '../test/**/*.js': ['babel'],
      '../src/**/*.less': ['babel']
    },
    webpack: { //kind of a copy of your webpack config
      devtool: 'inline-source-map', //just do inline source maps instead of the default
      module: {
        loaders: [
          {
            test: /\.js$/,
            loader: 'babel',
            exclude: /node_modules/,
            // query: {
            //   presets: ['es2015',  'react']
            // }
          },
          {
            test: /\.json$/,
            loader: 'json',
          },{
            test: /\.less$/,
            loader: "style!css!less",
          },
        ]
      },
      externals: {
        'react/lib/ExecutionEnvironment': true,
        'react/lib/ReactContext': true,
        'react/addons': true
      }
    },

    webpackServer: {
      noInfo: true //please don't spam the console when running in karma!
    },

    plugins: [
      'karma-webpack',
      'karma-jasmine',
      'karma-sourcemap-loader',
      'karma-chrome-launcher',
      'karma-phantomjs-launcher',
      'karma-mocha',
      'karma-chai',
      'karma-mocha-reporter',
      'karma-babel-preprocessor'
    ],


    babelPreprocessor: {
      options: {
        presets: ['es2015',  'react'],
        sourceMap: 'inline'
      }
    },
    reporters: ['mocha'],

    // reporter options
    mochaReporter: {
      colors: {
        success: 'blue',
        info: 'bgGreen',
        warning: 'cyan',
        error: 'red'
      },
      symbols: {
        success: '+',
        info: '#',
        warning: '!',
        error: 'x'
      }
    },

    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
  })
};

Answer 1

我认为您已经注释掉了加载程序的 presets 部分。如果没有 es2015 预设，babel 可能不知道如何处理 import 语句。 （import 是 ES6 模块的一部分，但在节点中还不是标准。）您是否尝试取消注释 query 和 presets 块？