javascript - karma 单元测试 : Module name "react" has not been loaded yet for context: _. 使用 require([])

Question

我正在尝试为 React 设置单元测试框架。这样做时，发生了以下错误。我在整个互联网上搜索过，但没有有效的解决方案。下面是显示的错误和我正在使用的代码/包。

调试错误

04 03 2016 04:48:46.340:DEBUG [phantomjs.launcher]: Error: Module name "react" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded


04 03 2016 04:48:46.341:DEBUG [phantomjs.launcher]:   http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:140 in defaultOnError
  http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:544 in onError
  http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1429 in localRequire
  http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1791 in requirejs

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  Error: Module name "react" has not been loaded yet for context: _. Use require([])
  http://requirejs.org/docs/errors.html#notloaded
  at /Users/lebeier/Documents/iMARS/node_modules/requirejs/require.js:140
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 0 of 0 ERROR (0.053 secs / 0 secs)

节点包

  "dependencies": {
    "bootstrap": "^3.3.6",
    "highcharts": "^4.2.1",
    "history": "^1.17.0",
    "jquery": "^2.2.0",
    "js-cookie": "^2.1.0",
    "react": "^0.14.6",
    "react-bootstrap": "^0.28.2",
    "react-bootstrap-table": "^1.4.5",
    "react-data-components": "^0.6.0",
    "react-dom": "^0.14.6",
    "react-highcharts": "^6.0.0",
    "react-notification-system": "^0.2.6",
    "react-router": "^1.0.3",
    "reactify": "^1.1.1",
    "toastr": "^2.1.2"
  },
  "devDependencies": {
    "babel-core": "^6.6.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.5.0",
    "babelify": "^7.2.0",
    "browserify": "^13.0.0",
    "core-js": "^2.1.3",
    "grunt-template-jasmine-requirejs": "^0.2.3",
    "jasmine": "^2.4.1",
    "karma": "^0.13.21",
    "karma-babel-preprocessor": "^6.0.1",
    "karma-browserify": "^5.0.2",
    "karma-cli": "^0.1.2",
    "karma-coverage": "^0.5.4",
    "karma-jasmine": "^0.3.7",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-requirejs": "^0.2.5",
    "karma-webpack": "^1.7.0",
    "node-sass": "^3.4.2",
    "phantomjs-prebuilt": "^2.1.4",
    "requirejs": "^2.1.22",
    "uglify": "^0.1.5",
    "watchify": "^3.7.0",
    "webpack": "^1.12.14"
  }

karma .conf.js

module.exports = function(config) {
  config.set({

  // base path that will be used to resolve all patterns (eg. files, exclude)
  basePath: '',

  // frameworks to use
  // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
  frameworks: ['jasmine', 'requirejs'],


  // list of files / patterns to load in the browser
  files: [
      'tests/*.js'
      //{ pattern: 'tests.webpack.js', watched: false }, 
  ],

  // list of files to exclude
  //exclude: [
  //  './node_modules/'
  //],

  plugins: [
    'karma-jasmine',
    'karma-requirejs',
    'karma-phantomjs-launcher',
    'karma-babel-preprocessor',
    'karma-coverage',
    'karma-browserify',
    'karma-webpack'
  ],

  // preprocess matching files before serving them to the browser
  // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
  preprocessors: {
    'core/static/core/js/*.js' : ['babel'],
    'tests/*.js' : ['babel'],
    'tests.webpack.js': [ 'webpack']
  },

  babelPreprocessor:{
    options: {
        presets: ['es2015', 'react'],
        plugins: ["transform-object-rest-spread"],
        sourceMap: 'inline'
    },
    filename: function(file){
        return file.originalPath.replace(/\.js$/, '.es5.js');
    },
    sourceFileName: function(file){
        return file.originalPath;
    }
  },
  // test results reporter to use
  // possible values: 'dots', 'progress'
  // available reporters: https://npmjs.org/browse/keyword/karma-reporter
  reporters: ['dots'],


  // web server port
  port: 9876,


  // enable / disable colors in the output (reporters and logs)
  colors: true,


  // level of logging
  // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
  logLevel: config.LOG_DEBUG,


  // enable / disable watching file and executing tests whenever any file changes
  autoWatch: true,

  // start these browsers
  // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
  browsers: ['PhantomJS'],

  // Continuous Integration mode
  // if true, Karma captures browsers, runs the tests and exits
  singleRun: true,

  // Concurrency level
  // how many browser should be started simultaneous
  concurrency: Infinity,

  webpack: {
    devtool: 'inline-source-map',
    modules: {
        loaders: [
            {
                test: /\.js$/, 
                exclude: /node_modules/, 
                loader: 'babel-loader',
                query:{
                    presets: ['es2015', 'react']
                }
            }
        ],
      },
      watch: true,
    },

    webpackServer: {
      noInfo: true,
    }
  })
}

测试/测试.js

import React from 'react';
import ReactDOM from 'react-dom';

describe('Testing', ()=>{
    it('sample test', ()=>{
        var v = 2;
        var parts = ['shoulders', 'knees'];
        var lyrics = ['head', ...parts, 'and', 'toes'];
        expect(v).toEqual(2); 
    }); 
});

非常感谢您的帮助!

Answer 1

当您有 require 时，您描述的错误正是 RequireJS 给您的错误以 CommonJS 形式 ( require('modX') ) 而不是 AMD 形式 ( require(['modX'], function (modX) {...}) ) 调用，并且调用是在不包含在 define 中的情况下完成的. RequireJS 为使用 CommonJS 表单提供了一些支持，但开发人员必须完成最少的工作以确保其正常工作。以此开头的脚本将无法运行:

var modX = require('modX');
// rest of the module

您会收到您收到的错误消息。你需要这个:

define(function (require) {
    var modX = require('modX');
    // rest of the module
});

你的设置发生了什么，Babel 正在将 ES6 模块转换成使用 require 的东西。没有 define wrapper 。为了让 Babel 输出正确的 AMD 模块，你需要安装 babel-plugin-transform-es2015-modules-amd并添加 transform-es2015-modules-amd到你的 Babel 插件列表。请参阅文档 here .