reactjs - reactjs jest jQuery未定义

Question

我正在使用 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，是否有人遇到过这个问题？

谢谢

Answer 1

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

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

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

2. 上的内容test-env.js看起来像这样

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

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

Answer 2

如果您使用的是 Jest 27+，则 node 现在是默认的testEnvironment. 如果您需要在 jest setup 脚本中使用 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(() => $());