Karma单元测试:模块名称"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

您描述的错误正是RequireJS在您使用requireCommonJS表单(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
});

这是怎么回事您的设置是,因为它是,巴贝尔正在改变ES6模块到使用一些require没有define包装.为了让Babel输出正确的AMD模块,您需要安装babel-plugin-transform-es2015-modules-amd并添加transform-es2015-modules-amd到您的Babel插件列表中.请参阅此处的文档.