4

I'm attempting to run Jest tests for a JS file that includes some jQuery. The jQuery code is unrelated and not being tested, but cannot be removed for other reasons. However my test suite will not run because of the jQuery $. I've been attempting various efforts to either mock or include jQuery somehow in the Jest environment. I'm using webpack's ProvidePlugin to make jQuery available to all modules in my app and I'm not sure if this is causing issues with $ potentially.

I have the following (psuedo) JS code in myfile.js:

export const myFunc = () => {
   return 'things';
}

// legacy jQuery code which can't be removed
$('.some-element').on('click', doSomethingUnrelated);

I'm intending to test myFunc() in myfile.test.js like so:

import { myFunc } from './myfile';

describe('my file', () => {
  it('returns things', () => {
     // some assertions
  })
})

webpack.common.js:

new webpack.ProvidePlugin({
  $: 'jQuery',
  jQuery: 'jquery',
  ...
})

When i run the jest test like this, it fails with the message: $ is not defined, which seems fair. Taking some ideas from this Jest issue here: https://github.com/facebook/jest/issues/708 I've tried:

jest.config.js:

module.exports = {
  setupFiles: ['./src/jest-setup-before.js'],
  ...
}

jest-setup-before.js:

// window.$ = require('jquery');
//
// import $ from 'jquery'
// global.$ = global.jQuery = $;
// 
// global.jQuery = require('jquery');
// global.$ = global.jQuery;

console.log($) // {}

I've also tried the above using setupFilesAfterEnv instead of setupFiles to see if installing jquery before tests run would help, but it didn't. These attempts all result in TypeError: $ is not a function.

I've also tried mocking jquery according to the docs: https://jestjs.io/docs/en/manual-mocks#mocking-node-modules by creating a __mocks__ directory adjacent to node_modules and creating an empty jquery.js file. I've also tried in jquery.js: jest.mock('jquery') although according to the docs I shouldn't have to.

Just seems like one of those scenarios I'm throwing anything I can at this problem without understanding fully, I'm still pretty new to Jest so any help is greatly appreciated here. Thanks!

Brian
  • 111
  • 1
  • 1
  • 6
  • https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/ – freedomn-m Sep 18 '20 at 14:43
  • Does this answer your question? [How do I implement JQuery.noConflict() ?](https://stackoverflow.com/questions/7882374/how-do-i-implement-jquery-noconflict) Hmm, maybe not. – freedomn-m Sep 18 '20 at 14:44
  • @freedomn-m much appreciated but unfortunately, still having no luck since i can't get past `$ is not a function` so i can't invoke `noConflict()`. :( – Brian Sep 18 '20 at 15:22
  • Jest is basically unrelated to webpack, it looks likely using `setupFiles` to publish `global.$ ` is the correct way to go. Can you show me full setup what you did try? – tmhao2005 Sep 19 '20 at 15:21
  • @tmhao2005 hey, thanks. this is pretty much the full relevant setup. the commented out code above in `jest-setup-before.js` are the various snippets i tried to bring in `$`. – Brian Sep 20 '20 at 13:59
  • `import $ from 'jquery'; global.$ = global.jQuery = $;` is suppose to be working. If it doesn't , why don't you push your simple setup to github. Then I'll have a look for you – tmhao2005 Sep 20 '20 at 14:01

0 Answers0