Jest not recognising JQuery Object ($)

Question

I have used JavaScript to created a simple web application to measure how much time I spend on different projects.

I want to test the code with Jest and this works fine until I try to test a function that contains the JQuery object ($).

This is the error message I get:

ReferenceError: $ is not defined

The answers I have found online tells me that I need to add a jQuery dependency in my global object, which I have done. Below is my package.json file:

"jest": {
    "setupFiles": ["PathToSetupFile/setup-jest.js"],
    "type": "module"

and my setup-jest.js:

import $ from 'jquery';
global.$ = global.jQuery = $;

I am now met with a new error message:

SyntaxError: Cannot use import statement outside a module

I cannot find any further information on how to fix this. A few resources tell me I need to update my jest.config.js file but this file does not exist anywhere in my node modules.

Answer 1

I thought it would be helpful to start completely from the beginning and therefore address a much wider scope but never the less provide the exact answer to your problem at the end of my response here.

In PowerShell CD to your project folder

Install the jest node modules locally into your project folder using

npm install --save-dev jest

Install jest globally so you can use it as a CLI command

npm install jest -g

This installs Jest globally i.e. to your user profile %APPDATA%\npm location

Ensure %APPDATA%\npm is in your user profile environment PATH variable (in Windows settings, "Edit Environment variables for your account")

Check in your PowerShell console that it is in your path using $Env:PATH. (If your %APPDATA%\npm path still isn't showing then restart the PowerShell window, if the terminal is inside VSCode then you will have to restart VSCode so that the terminal inherits the new environment)

In order to import jquery you will need to a) install jquery and b) define a setup file for jest which is referenced in jest.config.js created using jest --init in your project folder.

Install jquery -

npm install --save-dev jquery

Generate jest.config.js -

jest --init

The following questions will help Jest to create a suitable configuration for your project

? Would you like to use Typescript for the configuration file? ... no ? Choose the test environment that will be used for testing » jsdom (browser-like) ? Do you want Jest to add coverage reports? ... yes ? Which provider should be used to instrument code for coverage? » v8 ? Automatically clear mock calls, instances, contexts and results before every test? ... yes

?? Modified your\project\folder\package.json

? Configuration file created at jest.config.js

If you don't specify the jsdom (browser-like) test environment then running code under test that uses jquery will yield an error of "jQuery requires a window with a document"

But this means the 'jest-environment-jsdom' must now be installed (As of Jest 28 "jest-environment-jsdom" is no longer shipped by default, make sure to install it separately.) -

npm install --save-dev jest-environment-jsdom

Edit jest.config.js

Change
   // setupFiles: [],
To
   setupFiles: [ './jest.setup.js' ],

N.B. the "./" prefix is required otherwise jest will state it cannot find the jest.setup.js file.

The create jest.setup.js in your project folder and add the following -

const $ = require('jquery');
global.$ = global.jQuery = $;

Node uses the CommonJS module system (https://nodejs.org/en/knowledge/getting-started/what-is-require/) so the above syntax is required to work with Node.js