Follow-up from "Add jQuery in jest test_setup"

We ought to quarantine the code that we use which relies on javascript side-effects, specifically window.jQuery. Plugins which have this behavior could safely be wrapped such that we need not pollute the global space, or they should be marked for removal/replacement with a more modern solution.

The following discussion from !30100 (merged) should be addressed:

  • @pslaughter started a discussion:

    Why do we need to expose this?

    This greatly simplifies our migration from karma to jest.

    Why can't we do this per spec?

    This is explained in the follow up issue https://gitlab.com/gitlab-org/gitlab-ee/issues/12448.

    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 :(