jquery - 使用 jQuery 进行 React 组件而不需要 - jest 单元测试

标签 jquery reactjs jestjs reactjs-testutils

我有一个非常简单的 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 个副本。

有什么办法可对于Jest地告诉我的 React 组件 jQuery 已经存在于窗口中并且不用担心它吗?

最佳答案

我有一个类似的问题,但我认为到目前为止我已经解决了你的问题。 您需要在 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)

关于jquery - 使用 jQuery 进行 React 组件而不需要 - jest 单元测试,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27189254/

相关文章:

javascript - jquery淡入淡出div中的背景图像 - 交叉淡入淡出

reactjs - 如何使用 Context API 访问状态

reactjs - 在react元素中渲染null阻止我使用css的:empty selector

javascript - 错误没有 Jest : This usually means that you are trying to import a file which Jest cannot parse, 例如它不是普通的 JavaScript

javascript - 按钮在 IE9 中无法正确呈现

javascript - 如何从下面开始显示第二个 div 的内容?

javascript - 将变量绑定(bind)到函数上,将其更改为对象

jestjs - 有没有办法为 Jest 中的所有测试文件预定义通用导入?

reactjs - 开 Jest : fake setInterval not working as expected

javascript - 如何使用 JavaScript 隐藏选择选项? (跨浏览器)