reactjs jest jQuery未定义答案

【问题标题】：reactjs jest jQuery is not definedreactjs jest jQuery未定义
【发布时间】：2017-06-10 05:47:18
【问题描述】：

我正在使用 jest 来测试我的 reactJS 组件。在我的 reactJS 组件中，我需要使用 jquery UI，所以我在组件中添加了这个：

var jQuery = require('jquery');
require('jquery-ui/ui/core');
require('jquery-ui/ui/draggable');
require('jquery-ui/ui/resizable');

而且效果很好。但是，现在，我需要用jest来做测试，但是当我将组件加载到testutils中时，我立即遇到了这个问题，

Test suite failed to run
ReferenceError: jQuery is not defined

如果您在应用中使用 jQuery，有没有人遇到过这个问题？

谢谢

【问题讨论】：

stackoverflow.com/questions/41800122/… 的可能重复项
你试过window.$ = require('jquery');吗？

标签： reactjs jestjs babel-jest

【解决方案1】：

您可以在 global 对象中添加 jQuery 依赖项。执行以下操作

在您的package.json 中，在jest 键下添加setupFiles 像这样 "setupFiles": ["test-env.js"] 例如：

{
  "jest": {
    "setupFiles": [ "<rootDir>/tests/test-env.js" ]
  }
}

test-env.js 上的内容如下所示

import $ from 'jquery';
global.$ = global.jQuery = $;

确保从您的根目录到test-env.js 的路径是正确的。 <rootDir> 在 Jest 中可用。

【讨论】：

这个答案对我来说比其他任何人都好。只是关于 rootDir 的注释，它可以按如下方式使用：“/test-env.js” 我的笑话设置如下所示：“jest”：{ ... “setupFiles”：[“/ test-env.js"] }
就我而言，这种方法不起作用。但是一旦我通过我已经拥有的 jest.config.js 设置 setupFiles - 一切都变得很好。

【解决方案2】：

如果您使用的是 Jest 27+，则节点现在是默认的 testEnvironment。如果您需要在 jest 设置脚本中使用 jQuery，请务必先将 testEnvironment 改回 jsdom。

在jest.config.js:

module.exports = {
  setupFilesAfterEnv: ['./jest.setup.js'],
  testEnvironment: 'jsdom'
}

在jest.setup.js:

import $ from 'jquery';
global.$ = $;
global.jQuery = $;

// If you want to mock bootstrap
global.$.fn.modal = jest.fn(() => $());
global.$.fn.carousel = jest.fn(() => $());
global.$.fn.tooltip = jest.fn(() => $());

【讨论】：