requirejs - 设置 karma、chai、requirejs、chai-jquery

Question

我即将让我们的测试与 Karma 一起运行，但我错过了最后一步(我认为)，得到 chai-jquery为了表现，我尝试了两个不同的插件 https://www.npmjs.com/package/karma-chai-jquery和 https://www.npmjs.com/package/karma-jquery-chai即使按照其各种 github 问题或自述文件中设置的指定顺序，也没有成功。

这是我的 tests-main.js文件

var allTestFiles = [];
var TEST_REGEXP = /(spec|test)\.js$/i;

Object.keys(window.__karma__.files).forEach(function(file) {
    if (TEST_REGEXP.test(file)) {
        // Normalize paths to RequireJS module names.
        allTestFiles.push(file);
    }
});

require.config({

    baseUrl: '/base',

    paths: {
        'chai':             'node_modules/chai/chai',
        'chai-jquery':      'node_modules/chai-jquery/chai-jquery',
        'jquery':           '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery',
        'underscore':       '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min',
        'sn/sn-underscore': 'static/scripts/sn/sn-underscore',
        'vendor/jquery-ui': '//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min'
    },

    deps: allTestFiles,

    callback: window.__karma__.start
});

这是我的 karma.conf.js (删除了所有非关键或默认选项)

// Karma configuration
module.exports = function(config) {
    config.set({
        basePath: '',
        // Can't use chai in here for whatever reason
        frameworks: ['mocha', 'requirejs'],
        files: [
            'static/scripts-test/test-main.js',
            {pattern: 'node_modules/chai/chai.js', included: true},
            {pattern: 'static/scripts-test/**/*.js', included: false},
            {pattern: 'static/scripts/sn/**/*.js', included: false}
        ],
        exclude: [
            'static/scripts/global.js'
        ],
        browsers: ['PhantomJS']
    });
};

这是一个“工作”规范文件，它正确使用获取对 chai 的引用。和 jquery , 但正在加载 chai-jquery每次都失败。

define([
    'chai',
    'jquery',
    'static/scripts/sn/widgets/dismissable'
], function(chai, $) {
    chai.should();
    chai.expect();

    describe('Dismissable', function() {
        var $el = $('</p>'),
            closeBtnSel = '.js-dismissable-close-btn';

        beforeEach(function() {
            $('body').append('<div id="fixtures"></div>');
            $el.appendTo('#fixtures').dismissable({closeFn: 'hide'});
        });

        afterEach(function() {
            $el.remove();
        });

        it('should correctly create the HTML', function() {
            $(closeBtnSel).should.exist;
            $el.should.have.class('dismissable');
        });
    });
});

我得到的错误是:

TypeError: 'undefined' is not an object (evaluating '$(closeBtnSel).should.exist')

这是我的目录结构:

- static/
  - scripts/
  - scripts-test/
    - test-main.js
- node_modules/
- karma.conf.js

最后，我的 package.json

{
  "devDependencies": {
    "chai": "^2.3.0",
    "chai-jquery": "^2.0.0",
    "jquery": "^2.1.4",
    "karma-chai": "^0.1.0",
    "karma-mocha": "^0.1.10",
    "karma-requirejs": "*",
    "mocha": "^2.2.5",
    "requirejs": "^2.1.18",
    "should": "^6.0.1"
  }
}

我经常遇到的一些错误:

更改 karma.conf 中框架的顺序时

    throw error('No provider for "' + name + '"!');
                ^
    Error: No provider for "framework:chai"! (Resolving: framework:chai)

即使在安装插件后

有时我会得到这样的东西:

Error: Mismatched anonymous define() module: function ($) {
        return function (chai, utils) {
          return chaiJquery(chai, utils, $);
        };
      }

任何帮助将不胜感激，我无法理解这一点。

编辑:根据路易斯的建议进行的小改动

Answer 1

要安装“应该”API，您应该执行 chai.should() ，也就是调用函数。线路var should = chai.should没有做任何有用的事情。

我最初不清楚您的问题是否与 should 有关。导致了一连串的问题，或者是否有其他事情发生。我又看了一遍，发现确实问题比较多。

RequireJS 从 CDN + Karma 加载

那里的 Karma 似乎存在错误。见 this issue ，它仍然是开放的。还有that issue这是关闭的，但似乎提供了信息。所以我用本地副本替换了 CDN。否则，我得到:

ERROR: There is no timestamp for //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js!

Chai

一个问题是你必须决定是否要加载 chai与 script元素或通过 RequireJS。您问题中的代码试图同时执行这两种操作，这可能会导致问题。我决定让 RequireJS 加载它。这意味着它应该有 included: false .
chai-jquery
您的测试文件未加载 chai-jquery而不是问 chai使用它。因此，就您的代码而言，它不存在。您报告的间歇性加载问题可能是由其他测试文件中的代码引起的。 require.config来电已 deps: allTestFiles ，但这并没有指定任何顺序。 RequireJS 可以免费加载 allTestFiles 中的文件以它想要的任何顺序。

一个例子

我以您在问题中发布的代码作为示例的基础。显然，我没有您身边的所有代码。

这是新的 karma.conf.js :

module.exports = function(config) {
    config.set({
        basePath: '',
        frameworks: ['mocha', 'requirejs'],
        files: [
            'static/scripts-test/test-main.js',
            {pattern: 'node_modules/chai/chai.js', included: false},
            {pattern: 'node_modules/jquery/dist/jquery.min.js',
             included: false},
            {pattern: 'node_modules/chai-jquery/chai-jquery.js',
             included: false},
            {pattern: 'static/scripts-test/**/*.js', included: false},
            {pattern: 'static/scripts/sn/**/*.js', included: false}
        ],
        exclude: [
            'static/scripts/global.js'
        ],
        browsers: ['PhantomJS']
    });
};

新款 static/scripts-test/test-main.js它在本地加载 jQuery:

var allTestFiles = [];
var TEST_REGEXP = /(spec|test)\.js$/i;

Object.keys(window.__karma__.files).forEach(function(file) {
    if (TEST_REGEXP.test(file)) {
        // Normalize paths to RequireJS module names.
        allTestFiles.push(file);
    }
});

require.config({

    baseUrl: '/base',

    paths: {
        'chai':             'node_modules/chai/chai',
        'chai-jquery':      'node_modules/chai-jquery/chai-jquery',
        'jquery':           'node_modules/jquery/dist/jquery.min',
        'underscore':       '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min',
        'sn/sn-underscore': 'static/scripts/sn/sn-underscore',
        'vendor/jquery-ui': '//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min'
    },

    deps: allTestFiles,

    callback: window.__karma__.start
});

一个名为 static/scripts-test/foo.spec.js 的正确测试文件，注意使用 chai.use(chai_jquery) :

define([
    'chai',
    'jquery',
    'chai-jquery',
], function(chai, $, chai_jquery) {
    chai.should();
    chai.use(chai_jquery);

    describe('example', function() {
        it('body should exist', function() {
            $(document.body).should.exist;
        });

        it('#blah should not exist', function() {
            $("#blah").should.not.exist;
        });
    });
});

上面的代码运行没有问题:

WARN [watcher]: Pattern "/tmp/t5/static/scripts/sn/**/*.js" does not match any file.
INFO [karma]: Karma v0.12.37 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 43.0.2357 (Linux 0.0.0)]: Connected on socket Za9vBp9shDedsIhcNn63 with id 48683492
Chrome 43.0.2357 (Linux 0.0.0): Executed 2 of 2 SUCCESS (0.005 secs / 0.002 secs)

我使用 Chrome 作为我的浏览器，但这是唯一的区别。