javascript - test - Prueba de unidad de Karma: el nombre del módulo "reaccionar" no se ha cargado todavía para el contexto:_. El uso requiere([])

mocha test javascript

Question

Estoy tratando de configurar el marco de prueba de la unidad para reaccionar. Mientras lo hace, se produjo el siguiente error. He buscado en Internet sin ninguna solución que funcione. a continuación se muestran los errores y el código / paquetes que estoy usando.

error de depuración

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)

paquetes de nodos

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

tests / 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); 
    }); 
});

¡La ayuda es muy apreciada!

Answer 1

El error que describes es exactamente lo que RequireJS te da cuando tienes una llamada obligatoria en el formulario CommonJS ( require(''modX'') ) en lugar del formulario AMD ( require([''modX''], function (modX) {...}) ), y la llamada se realiza sin estar envuelta en define . RequireJS proporciona algo de soporte para usar el formulario CommonJS, pero hay un mínimo de trabajo que debe realizar el desarrollador para garantizar que funcione. Un script que comience con esto no funcionará:

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

Obtienes el mensaje de error que recibiste. Necesitas esto en su lugar:

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

Lo que está pasando con su configuración es que, tal como está, Babel está transformando los módulos de ES6 en algo que utiliza require sin el contenedor de define . Para que Babel produzca los módulos de AMD adecuados, debe instalar babel-plugin-transform-es2015-modules-amd y agregar transform-es2015-modules-amd a su lista de complementos de Babel. Vea la documentación aquí .