Question

我在我的项目中设置ES6单元测试，我在使用它们时遇到了一些麻烦。我以为我使用jQuery作为测试来尝试使它工作。没有库，测试工作。

请注意，jQuery会导入到我的main.js文件中，因此它在整个项目中都可用。

我的JS文件如下所示：

class Test {
  constructor(options) {
    this.init();
  }

  init() {
    $('.test-div').addClass('test');
  }

  sayHello() {
    return 'hello world!';
  }
}

export default Test;

测试看起来像这样：

import jsdom from 'mocha-jsdom';
import chai from 'chai';
import Test from './test';

chai.should();

describe('Frequency', () => {

  var $;
  jsdom();

  before(() => {
    $ = require('jquery');
  })

  it('should output hello world', () => {
      const test = new Test();
      test.sayHello().should.equal('hello world!');
  });

});

如果删除init()功能，则测试有效。但是，before函数似乎没有为测试导入jQuery。我在控制台中收到的错误如下：

ReferenceError: $ is not defined
  at Frequency.init

Answer 1

我复制了你的代码并通过将before挂钩修改为：

来使其工作

before(() => {
  $ = require('jquery');
  global.$ = $;
});

如果您阅读了mocha-jsdom的文档，就会看到它放入了window和document这样的全局空格符号。加载jquery时，会找到window并将其自身添加为window.$。在浏览器中，此还使$在全局空间中可见，因为window 是全局空间。但是，在Node中，全局空间为global，因此您必须自己将$放入其中。

Answer 2

您需要在自定义setup.js中声明全局变量：

package.json：

"scripts": {
    "unit": "mocha-webpack --webpack-config webpack.test.js  test/unit/*.spec.js --require test/setup.js"
 },

或者如果您不使用webpack：

"scripts": {
     "unit": "mocha test/unit/*.spec.js --require test/setup.js"
},

test / setup.js：

let jsdom = require('jsdom-global')();
let jQuery = require("jquery");

global.jQuery = jQuery;
global.$ = jQuery;    

//https://github.com/vuejs/vue-cli/issues/2128
window.Date = Date;

然后，您可以像往常一样在测试脚本中使用它们。

我如何修复＆＃34; ReferenceError：$未定义＆＃34;什么时候使用jocha与jocha-jsdom？

2 个答案: