He usado JavaScript para crear una aplicación web simple para medir cuánto tiempo paso en diferentes proyectos.
Quiero probar el código con Jest y funciona bien hasta que intento probar una función que contiene el objeto JQuery ($).
Este es el mensaje de error que recibo:
ReferenceError: $ is not defined
Las respuestas que encontré en línea me dicen que necesito agregar una dependencia de jQuery en mi objeto global, lo cual hice. A continuación se muestra mi archivo package.json:
"jest": { "setupFiles": ["PathToSetupFile/setup-jest.js"], "type": "module"
y mi setup-jest.js:
import $ from 'jquery'; global.$ = global.jQuery = $;
Ahora me encontré con un nuevo mensaje de error:
SyntaxError: Cannot use import statement outside a module
No puedo encontrar más información sobre cómo solucionar esto. Algunos recursos me dicen que necesito actualizar mi archivo jest.config.js, pero este archivo no existe en ninguna parte de mis módulos de nodo.
Pensé que sería útil comenzar completamente desde el principio y, por lo tanto, abordar un alcance mucho más amplio, pero sin embargo, proporcionar la respuesta exacta a su problema al final de mi respuesta aquí.
En PowerShell CD a su carpeta de proyecto
Instale los módulos del nodo jest localmente en la carpeta de su proyecto usando
npm install --save-dev jest
Instale jest globalmente para que pueda usarlo como un comando CLI
npm install jest -g
Esto instala Jest globalmente, es decir, en su perfil de usuario %APPDATA%\npm ubicación
Asegúrese de que %APPDATA%\npm esté en la variable PATH del entorno de su perfil de usuario (en la configuración de Windows, "Editar variables de entorno para su cuenta")
Verifique en su consola de PowerShell que está en su ruta usando $Env:PATH. (Si su ruta %APPDATA%\npm aún no se muestra, reinicie la ventana de PowerShell, si el terminal está dentro de VSCode, tendrá que reiniciar VSCode para que el terminal herede el nuevo entorno)
Para importar jquery, deberá a) instalar jquery y b) definir un archivo de configuración para jest al que se hace referencia en jest.config.js creado usando jest --init en su carpeta de proyecto.
instalar jquery -
npm install --save-dev jquery
Generar jest.config.js -
jest --init
Las siguientes preguntas ayudarán a Jest a crear una configuración adecuada para su proyecto
√ ¿Le gustaría usar Typescript para el archivo de configuración? ... no √ Elija el entorno de prueba que se usará para la prueba » jsdom (similar a un navegador) √ ¿Desea que Jest agregue informes de cobertura? ... sí √ ¿Qué proveedor se debe usar para instrumentar el código de cobertura? » v8 √ ¿Borrar automáticamente llamadas, instancias, contextos y resultados simulados antes de cada prueba? ... sí
✏️ Modificado your\project\folder\package.json
📝 Archivo de configuración creado en jest.config.js
Si no especifica el entorno de prueba jsdom (similar a un navegador), ejecutar el código bajo prueba que usa jquery generará un error de "jQuery requiere una ventana con un documento"
Pero esto significa que 'jest-environment-jsdom' ahora debe estar instalado (a partir de Jest 28, "jest-environment-jsdom" ya no se envía de forma predeterminada, asegúrese de instalarlo por separado).
npm install --save-dev jest-environment-jsdom
Editar jest.config.js
Change // setupFiles: [], To setupFiles: [ './jest.setup.js' ],
Nota: se requiere el prefijo "./"; de lo contrario, jest indicará que no puede encontrar el archivo jest.setup.js.
Cree jest.setup.js en la carpeta de su proyecto y agregue lo siguiente:
const $ = require('jquery'); global.$ = global.jQuery = $;
Node usa el sistema de módulos CommonJS ( https://nodejs.org/en/knowledge/getting-started/what-is-require/ ), por lo que se requiere la sintaxis anterior para trabajar con Node.js