'ReferenceError: jQuery is not defined on jest with vue-testing-library

I am trying to run a unit test with vue-testing-library on a file that contains the draggable widget of jQuery UI. I am actually not trying to test the draggable widget but this is causing an error that I can't seem to find a resolution too despite trying out suggestions from a few similar questions.

The following is the code where I use the .draggable function.

$('#batch').draggable({disabled: !enable});

In my jest.setup.js, I have the following:

window.jQuery = require('jquery');
window.$ = require('jquery');

I have also tried this:

import * as $ from 'jquery';
Object.defineProperty(window, '$', {value: $});
Object.defineProperty(global, '$', {value: $});
Object.defineProperty(global, 'jQuery', {value: $});

In both cases, I get the following error:

  ● Test suite failed to run

    ReferenceError: jQuery is not defined

    > 21 | import 'jquery-ui/ui/widgets/draggable'

Here is my jest.config.js

module.exports = {
    moduleFileExtensions: [
        'js',
        'json',
        'vue'
    ],
    transform: {
        '^.+\\.vue$': 'vue-jest',
        '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
        '.*\\.(js)$': 'babel-jest',
    },
    testPathIgnorePatterns: [
        '<rootDir>/node_modules/',
    ],
    transformIgnorePatterns: [
        '<rootDir>/node_modules/(?!(laravel-mix-vue-svgicon/)'
    ],
    // support the same @ -> src alias mapping in source code
    moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/js/$1',
    },
    testEnvironment: 'jest-environment-jsdom',
    // serializer for snapshots
    snapshotSerializers: [
        'jest-serializer-vue'
    ],
    testMatch: [
        '**/js/tests/unit/**/*.spec.js',
    ],
    // https://github.com/facebook/jest/issues/6766
    testURL: 'http://localhost/',
    watchPlugins: [],
    setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
}

The error is coming from jquery-ui/ui/widgets/draggable.js but I am not sure why it thinks jQuery is not defined as when I do a log jQuery on the component, I can see it is defined as expected.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source