9

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

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

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

就行为而言，这不是问题 - 但是在运行 jest 以使用此 mixin 对组件进行单元测试时会引发问题，从而引发错误。

ReferenceError: $ is not defined

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

有什么办法可以开玩笑地告诉我的反应组件 jQuery 已经存在于窗口中而不用担心它？

4

3 回答 3

7

我有一个类似的问题，但我认为到目前为止我已经解决了你的问题。您需要在您的反应文件中使用 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')

然后你的笑话单元测试应该通过（假设他们没有验证 jQuery 正在做的事情——这是我的测试失败的地方）。

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

于 2015-07-01T12:55:53.300 回答
2

我要做的是：

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

我希望这可以帮助别人！

更新：

我已经开始import $ from 'jquery'在所有使用 jQuery 的 React 文件中。这消除了对 window.$ 是我期望的 jQuery 类型的依赖（我遇到了其他库与 window.$ 混淆的问题。起初，我担心到处导入 jQuery，因为我担心这会增加我的bundle size. 但是捆绑的工作方式，所有这些导入都指向一个单例，所以捆绑大小不会增加。

于 2016-08-11T19:10:41.707 回答
2

就我而言，我对在我的组件中测试 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();
  });
});

我知道如果不调用该$函数，我的组件将无法安装。所以我只是jest.fn用beforeAll(). 现在，我也知道我的实际组件中的 jQuery 函数是链式的。所以我知道我还需要考虑 jQuery .on()，所以我确保返回一个带有on函数的对象。没有进一步的链接，所以这就是我可以停下来的地方。

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

beforeAll(() => {
  // mocking jQuery $()
  var fakeQuery = jest.fn(() => {
    return {
      on: fakeQuery,
      off: fakeQuery,
      click: fakeQuery
    }
  })
  global.window.$ = fakeQuery;
});
于 2016-12-08T18:28:47.177 回答