使用不带require jest单元测试的jQuery的React组件

Question

我有一个非常简单的React mixin，它使用jQuery来触发事件

MyMixin = {
  trackStructEvent: function () {
    args = Array.prototype.slice.call(arguments);
    $('body').trigger('myEvent', args);
  }
module.exports = MyMixin

这将作为使用browserify的一组新组件的一部分导入到主站点。由于包含这些组件的主站点将始终包含jQuery，因此我不希望在browserify中使用jQuery，因为它将被复制。

就行为而言，这不是问题--然而，当运行jest来使用这个混入对组件进行单元测试时，它会引发问题，抛出错误。

ReferenceError: $ is not defined

我知道我可以通过browserify包含jQuery来修复这个问题，但这会将2个副本加载到我的站点中。

在jest中，有没有办法告诉我的react组件jQuery已经存在于窗口中，而不用担心呢？

Answer 1

我也有类似的问题，但我认为到目前为止我已经解决了你的问题。您需要在react文件中使用require来定义$下的jQuery

var $ = require('jquery');

MyMixin = {
   trackStructEvent: function () {
      args = Array.prototype.slice.call(arguments);
      $('body').trigger('myEvent', args);
   }
module.exports = MyMixin

然后，您需要告诉jest不要模仿jquery

jest.dontMock('jquery')

然后你的jest单元测试应该会通过(假设它们没有验证jQuery正在做的事情--这就是我的测试失败的地方)。

您还需要告诉browserify jQuery是外部的，那么结果将是您对$的所有引用都已定义，jquery库已加载以进行测试，但并未包含在您的browserify包中。(使用browserify-shim)

Answer 2

我要说的是：

if (process.env.NODE_ENV === 'test') window.$ = require('jquery');

我希望这对某些人有帮助！

更新：

我已经开始在所有使用jQuery的React文件中使用import $ from 'jquery'。这消除了对Windows.$的依赖，因为它是我期望的jQuery类型(我在处理Windows.$时遇到了其他库的问题。一开始，我很担心在任何地方导入jQuery，因为我担心这会增加我的包大小。但是捆绑的工作方式是，所有这些导入都指向一个单例，因此捆绑的大小不会增加。

Answer 3

就我而言，我对在我的组件中测试jQuery功能不感兴趣。此外，我没有在我的捆绑包中包含jQuery，因为我的应用程序所在的网站上到处都在使用和包含它。因此，举个例子，我做了以下工作：

// SubmitRender.js

// ...import statements...

var SubmitRender = React.createClass({
  componentWillMount: function () {
    $('form').on('submit', (e)=>{
      this.handleSubmit(e);
    });
  },

  // ...more code...
});
export default SubmitRender;

。

// SubmitRender.spec.js

// ...import statements...

describe('SubmitRender', () => {
  beforeAll(() => {
    // mocking jQuery $()
    global.window.$ = jest.fn(() => {return {on: jest.fn()}});
  });

  it('renders without error', () => {
    expect( () => render(<SubmitRender />) ).not.toThrow();
  });
});

我知道如果不调用$函数，我的组件将无法挂载。所以我只是在beforeAll()中用jest.fn模拟了这个函数。现在，我还知道我的实际组件中的jQuery函数是链式的。因此，我知道我还需要考虑jQuery的.on()，因此我确保使用on函数返回一个对象。没有更多的链接，所以这就是我要说的。

如果我有一组更复杂的链式函数，我可以这样做：

beforeAll(() => {
  // mocking jQuery $()
  var fakeQuery = jest.fn(() => {
    return {
      on: fakeQuery,
      off: fakeQuery,
      click: fakeQuery
    }
  })
  global.window.$ = fakeQuery;
});