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

Question

I ma using Karma, Webpack, enzyme, PhantomJS to test my react project. When I run below command to run the test cases,

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

I got below error:

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

In the line3 of the source code of test.js, I didn't use require, below is the code:

import { expect } from 'chai'; 

I wander why PhantomJS complain this error.

Below is my karma conf file:

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

I think you've commented out the presets section of your loader. Without the es2015 preset babel may not know how to deal with import statements. (import is part of ES6 modules but not yet standard in node.) Have you tried uncommenting out the query and presets block?