Better support for Jest specs needing jQuery
Description
This is a technical debt issue for us to explore how to better support Jest specs dependent on jQuery
.
In this MR, we opted to expose jQuery to the window object because it helped the Jest migration https://gitlab.com/gitlab-org/gitlab-ce/issues/62765. Let's revisit this approach and determine what the downsides to this are and if there are better alternatives.
Challenges
Ideally we could do this per spec that needs it, but unfortunately this won't work. We would need to import jQuery and expose it in window
before importing the module. Since imports
are hoisted to the top by webpack, we would need to use require
. Unfortunately, we lose our .vue
webpack loader with require, so this approach will not work.
Example:
import $ from 'jquery';
// We can't just import foo directly because it uses `select2` which needs jQuery exposed to the `window`
// import Foo from 'foo.vue';
// So let's expose jQuery
window.jQuery = $;
// Unfortunately we can't use `import` because webpack hoists this to the top
// Also, `require` doesn't work because it doesn't use the vue webpack loader
const Foo = require('foo.vue'); // Does not work :(
Edited by Paul Slaughter