如何在 Karma、Webpack、PhantomJS 中运行单元测试时修复错误“ReferenceError: Can't find variable: require”答案

【问题标题】：How to fix the error 'ReferenceError: Can't find variable: require' when running unit test in Karma, Webpack, PhantomJS如何在 Karma、Webpack、PhantomJS 中运行单元测试时修复错误“ReferenceError: Can't find variable: require”
【发布时间】：2017-04-15 22:32:14
【问题描述】：

我使用 Karma、Webpack、酶、PhantomJS 来测试我的反应项目。当我运行下面的命令来运行测试用例时，

./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源码的line3中，我没有使用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,
  })
};

【问题讨论】：

标签： webpack karma-jasmine enzyme karma-mocha

【解决方案1】：

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

【讨论】：