Create-react-app: Test suite failed: jQuery is not defined

[FrancescaBarbazeni]

Description

I have imported jquery and the resizable widget in a component in this way:

import $ from "jquery";
import 'jquery-ui/themes/base/resizable.css';
import 'jquery-ui/ui/widgets/resizable';

It worked fine but when I try to run the unit test it returns this error:

Test suite failed to run
ReferenceError: jQuery is not defined

what can I do? Thanks

[shrynx]

@FrancescaBarbazeni Try if this helps

import jQuery from 'jquery';
import 'jquery-ui/themes/base/resizable.css';
import 'jquery-ui/ui/widgets/resizable';

// if you want to use $ as an alias
const $ = jQuery

[FrancescaBarbazeni]

Thank you @shrynx but nothing changes

[gaearon]

Can you provide the full message (with the stack) or a screenshot please?
Which version of jquery do you have in package.json?

[FrancescaBarbazeni]

yes of course, this is the error:

and here the version:

 "jquery": "^3.2.1",
 "jquery-ui": "^1.12.1",

[Timer]

Try this (note the use of require instead of import):

import 'jquery-ui/themes/base/resizable.css'

const $ = require('jquery')
window.jQuery = $;
require('jquery-ui/ui/widgets/resizable')

[shrynx]

@timer window will only be available in componentDidMount.
i am able to use jquery with jquery-ui only by aliasing in webpack.
seems jquery-ui has some issue with webpack and all

[FrancescaBarbazeni]

@Timer with your code the error becomes:

Test suite failed to run  
TypeError: Cannot read property 'mouse' of undefined

[gaearon]

Is jQuery UI even compatible with jsdom? I’m not sure it’s possible to use it in tests.
I would suggest mocking out the component using jQuery UI so that it‘s not actually used in tests:

// in test file
jest.mock('../MyComponentUsingJQuery', () => <div />)

Of course this would mean you’re not testing that specific component, but at least it should fix the issues.

@FrancescaBarbazeni

To help more we’d need to have a GitHub project reproducing the issue. From your previous message, it is hard to say something because the stack is missing.

[FrancescaBarbazeni]

@gaearon you can find a trivial project with the issue here: https://github.com/FrancescaBarbazeni/jquery-not-defined

I have only modified the App.js file and added jquery and jquery-ui. If you run the test suite you will find the error. I hope this helps you!

[gaearon]

Seems like it works with this:

import $ from "jquery";
import 'jquery-ui/themes/base/resizable.css';

window.jQuery = $;
require('jquery-ui/ui/version');
require('jquery-ui/ui/plugin');
require('jquery-ui/ui/widget');
require('jquery-ui/ui/widgets/mouse');
require('jquery-ui/ui/widgets/resizable');

I sent a PR: https://github.com/FrancescaBarbazeni/jquery-not-defined/pull/1.

I would add that this is pretty broken (on jQuery side) as it’s not really compatible with modern bundlers, and you might have better luck using React-specific libraries instead. But it seems to work.

Hope it helps!

[FrancescaBarbazeni]

Yes, it definitely works! What do you suggest to use instead? Thank you so much

[gaearon]

I’m not sure really, depends on what exactly you’re looking for. If I search for "resizable table reactjs" I find a bunch of components, maybe one will match your needs!

[Rajesh-Hegde]

i am not able to figure out reference Error:window is not defined while i run the testcase

what can I do? Thanks

[gaearon]

@Rajesh-Hegde File a new issue with a reproducing project.