Как использовать псевдонимы пакетов в Karma? (Пример: $ для jquery)

Мой код зависит от тонны другого кода и загружается последним в браузере при запуске из обычного файла index.html. Так что, конечно, когда зависимость 1 — это jquery, а зависимость 2 использует $.html(), а мой код загружается третьим, это прекрасно работает в браузере.

Но в Karma все останавливается, так как я загружаю «jquery» из беседки, а не «$».

Чтобы было ясно: это не мой код создает ошибки, а зависимости. Я не могу проверить свой код, так как до этого все вылетает.

Итак, как мне заставить тесты работать?

Примечание. Я также запускаю все через веб-пакет, поэтому я могу использовать ES6-код, но веб-пакет также загружается в Karma, поэтому это не должно иметь никакого эффекта.

Chrome 45.0.2454 (Mac OS X 10.11.0) ERROR
Uncaught TypeError: Cannot set property '$' of undefined
at /Users/tom/dev/orm/bower_components/jointjs/dist/joint.js:37

Webpack.conf.js:

var webpack = require('webpack');
module.exports = {
  devtool: 'source-map-loader',
  externals: [
    'jquery',
    'joint',
    'backbone',
    'loadash'
  ],
  // entry: './src/index.js',
  // output: {
  //   path: './public',
  //   filename: 'designer.js'
  // },
  plugins: [
    new webpack.ProvidePlugin({'$': 'jquery', 'jointjs': 'joint'})
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  }
};

Карма.conf.js:

// Karma configuration
// Generated on Thu Oct 08 2015 10:54:47 GMT+0200 (CEST)
var webconf = require('./webpack.config.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',
      'bower'
    ],


    // list of files / patterns to load in the browser
    files: [
      'test-main.js',
      {
        pattern: 'test/*.js',
        included: false
      }
    ],

    bowerPackages: [
      'jquery',
      'jointjs',
      'backbone',
      'lodash'
    ],
    // list of files to exclude
    exclude: [],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      'test/*.js': [
        'webpack',
        'sourcemap'
      ],
      'src/**/*.js': [
        'webpack',
        'sourcemap'
      ]
    },
    webpack: webconf,


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: [
      'progress'
    ],


    // 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_INFO,


    // 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',
      'Chrome'
    ],


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

person tofagerl    schedule 08.10.2015    source источник
comment
Можете ли вы настроить небольшую демонстрацию онлайн? Вы указываете на конфигурацию своего веб-пакета через Karma?   -  person Juho Vepsäläinen    schedule 08.10.2015
comment
Я да. Я свяжу некоторые файлы конфигурации в Q.   -  person tofagerl    schedule 09.10.2015


Ответы (2)


Я думаю, вы либо ищете внешние веб-пакеты

Внешние компоненты Webpack

{
    externals: {
        // require("jquery") is external and available
        //  on the global var jQuery
        "jquery": "jQuery"
    }
}

...или предоставьте плагины.

Предоставить подключаемый модуль и внешний модуль

plugins: [
  new webpack.ProvidePlugin({
    "_": "underscore"
  }) 
]

Скорее всего, предоставьте плагин, потому что вы хотите provide использовать эту глобальную переменную для всех веб-пакетов.

person 4m1r    schedule 08.10.2015
comment
Я пробовал оба, безуспешно. Providerplugin теперь используется в приведенных выше примерах кода, возможно, я просто использовал его неправильно, потому что похоже, что это должно быть правильным решением. - person tofagerl; 09.10.2015

Я понятия не имею, что изменилось, но теперь он работает нормально. Я включаю сюда окончательный файл конфигурации Karma. Файл webpack идентичен приведенному выше.

Обратите внимание, что несколько изменений конфигурации на самом деле являются обычными изменениями конфигурации, которые я изменил с тех пор, как он заработал.

// Karma configuration
// Generated on Thu Oct 08 2015 10:54:47 GMT+0200 (CEST)
var webconf = require('./webpack.config.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: [
      'requirejs',
      'bower',
      'jasmine',
    ],
    bowerPackages: [
      'jquery',
      'lodash',
      'backbone',
      'jointjs'
    ],

    // list of files / patterns to load in the browser
    files: [
      'test-main.js',
      {
        pattern: 'test/*.js',
        included: false
      }
    ],
    // list of files to exclude
    exclude: [],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      'test/*.js': [
        'webpack',
        'sourcemap'
      ],
      'src/**/*.js': [
        'webpack',
        'sourcemap'
      ]
    },
    webpack: webconf,


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: [
      'progress'
    ],


    // 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_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,
    client: {
      captureConsole: false
    },
    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: [
      'PhantomJS',
      'Chrome'
    ],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false
  });
};
person tofagerl    schedule 15.10.2015