reactjs jest jQuery is not defined

Question

I am using jest to test my reactJS component. In my reactJS component, I need to use jquery UI, so I added this in the component:

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

And it worked fine. But, now, I need to used jest to do testing, but I immediately meet this issue when I load the component into testutils,

Test suite failed to run
ReferenceError: jQuery is not defined

Has anyone met this issue if you are using jQuery in your app?

Thanks

possible duplicate of http://stackoverflow.com/questions/41800122/uncaught-referenceerror-jquery-is-not-defined-with-create-react-app/ — Mayank Shukla, Jan 25 '17 at 07:13

score 53 · Answer 1 · edited Aug 07 '20 at 16:06

53

You can add jQuery dependency in your global object. Do the following

In your package.json, under jest key add setupFiles like this "setupFiles": ["test-env.js"] For example:

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

Where the contents on test-env.js look like this

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

Make sure the path to test-env.js is correct from your root directory. <rootDir> is available in Jest.

edited Aug 07 '20 at 16:06

mrkwse

420
7
16

answered Feb 07 '17 at 09:48

mdsAyubi

1,225
9
9

4

This answer worked for me better than any others. just a note on rootDir, it can be used as follows: "/test-env.js" my jest setup looked like the folowing: "jest": { ... "setupFiles": ["/test-env.js"] } – Dennis Baskin Aug 04 '17 at 08:19
In my case this approach not worked. But as soon as I set setupFiles via jest.config.js which I already had - everything became fine. – ydanila Dec 28 '20 at 09:51

score 0 · Answer 2 · answered Jun 29 '21 at 07:46

If you are using Jest 27+, node is now the default testEnvironment. If you need to use jQuery in jest setup script, make sure to first change the testEnvironment back to jsdom.

in jest.config.js:

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

in 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(() => $());

score 0 · Answer 3 · answered Oct 03 '22 at 17:43

0

The above answers didn't work for me. Only this worked:
Create a file called setupTests.js in your src folder and enter this:

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

reactjs jest jQuery is not defined

3 Answers3

Linked