业力单元测试：尚未为上下文_加载模块名称“ react”。使用require（[]）

Question

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

调试错误

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,
    }
  })
}

测试/ test.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以CommonJS形式（require('modX')）而不是AMD形式（require(['modX'], function (modX) {...})）进行调用时，您所描述的错误正是RequireJS给您的， 并且
调用没有被封装进来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包装即可使用的模块。为了使Babel输出正确的AMD模块，您需要安装babel- plugin-transform-es2015-modules-amd并添加transform-es2015-modules- amd到Babel插件列表中。请参阅此处的文档。