javascript - 在 mocha-jsdom 中使用 jQuery 时如何修复 "ReferenceError: $ is not defined"？

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() 函数，则测试有效。但是，之前的函数似乎没有导入 jQuery 进行测试。我在控制台中收到的错误如下:

ReferenceError: $ is not defined
  at Frequency.init

Answer 1

我复制了您的代码，并将 before Hook 修改为:

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

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