Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Vite + Jest + React Testing Library - Configuraciones a seguir

Instalación y configuracion de Jest + React Testing Library

En proyectos de React + Vite

  1. Instalaciones:
yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react 
yarn add --dev @testing-library/react @types/jest jest-environment-jsdom
  1. Opcional: Si usamos Fetch API en el proyecto:
yarn add --dev whatwg-fetch
  1. Actualizar los scripts del package.json
"scripts: {
  ...
  "test": "jest --watchAll"
  1. Crear la configuración de babel babel.config.js
module.exports = {
    presets: [
        [ '@babel/preset-env', { targets: { esmodules: true } } ],
        [ '@babel/preset-react', { runtime: 'automatic' } ],
    ],
};
  1. Opcional, pero eventualmente necesario, crear Jest config y setup:

jest.config.js

module.exports = {
    testEnvironment: 'jest-environment-jsdom',
    setupFiles: ['./jest.setup.js']
}

jest.setup.js

// En caso de necesitar la implementación del FetchAPI
import 'whatwg-fetch'; // <-- yarn add whatwg-fetch
@gugadev
Copy link

gugadev commented Sep 27, 2022

Mientras no hayan variables de entorno todo bien, el problema viene cuando usas variables de entorno.

@joaquincruzat
Copy link

Si alguien tiene error con la configuración del test, cambie los config de babel y jest con extensión.cjs. Ej: "babel.config.js" a babel.config.cjs"

@lawrent-yamil
Copy link

Gracias !!!!

@csparedes
Copy link

En el error de la configuración de jest, le solucione cambiando el babel.config.js a "babel.config.json", me quedó de la siguiente manera:
{ "presets": [ [ "@babel/preset-env", { "targets": { "esmodules": true } } ], [ "@babel/preset-react", { "runtime": "automatic" } ] ] }
Al hacer este cambio, y cambiar en el jest.config.js a:
export default { testEnvironment: 'jest-environment-jsdom', setupFiles: ['./jest.setup.js'] }
Ya funciona normalmente, con las configuraciones que Fernando establece al inicio

@ezamudio
Copy link

ezamudio commented Oct 5, 2022

Si les sale el error presentado previamente solo cambién el jest.config.js por esto:

const jestConfig = {
  testEnvironment: 'jest-environment-jsdom',
  setupFiles: ['./jest.setup.js'],
};

export default jestConfig;

@cristianquaglio
Copy link

Yo tuve que actualizar la versión de node para que me funcione la instalación. Aclaro por si sirve.

@guillermoSb
Copy link

Muchas Gracias!

@fideo
Copy link

fideo commented Oct 23, 2022

Maravilloso aporte profe. Para los que trabajan con npm y para los que hayan tenido también problemas con las configuraciones, hice esta guía: https://shard-pull-4e1.notion.site/Day-15-of-100daysofcode-b4f62b40aa804d5b91d6ecfcc5a761f6

Muchas gracias me estaba volviendo loco con el error, no estaba pudiendo solucionarlo y con tu guía pude solucionarlo. Gracias.

@ruvaz
Copy link

ruvaz commented Oct 26, 2022

Para que me funcionara en React 18 solo tuve que seguir las instrucciones originales del prof pero despues hago lo siguiente:

  1. Elimino el jest.config.js

  2. En lugar de crear el archivo babel.config.js yo creo: babel.config.json con su contenido en formato json.

    {
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
              "node": "current"
            }
          }
        ]
      ]
    }
    
  3. Crear archivo .babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}```

@hectorRperez
Copy link

Gracias por esta info, la estaba buscando bastante

@rodwyn
Copy link

rodwyn commented Oct 28, 2022

Yo tuve que actualizar la versión de node para que me funcione la instalación. Aclaro por si sirve.

¿a qué versión?

@MikeCruz17
Copy link

¡Muchas Gracias!

Me funcionó a la perfección en React 18.

@Deleina
Copy link

Deleina commented Dec 17, 2022

npm

npm install jest babel-jest @babel/preset-env @babel/preset-react --save-dev

npm install @testing-library/react @types/jest jest-environment-jsdom --save-dev

npm install whatwg-fetch --save-dev

@PhilippAndres24
Copy link

PhilippAndres24 commented Jan 3, 2023

Realice la configuración como lo indicas pero me arrojo el siguiente error, image

Hola hay una solución sobre eso. cambia el nombre del archivo bablel.config.js a babel.config.cjs y haz lo mismo con el archivo de jes.config.js; cambialo a jest.config.cjs. Es lo que soluciono -> Fernando que esta en las sección de preguntas. Seria bueno que actualice esto en el readme. @Klerith Es solo una sugerencia. jejeje

Yo tambien lo pude solucionar en el package.json donde
"name": "journal-app",
"private": true,
"version": "0.0.0", debajo de esta linea aparece algo de module y eso lo borre, dejandolo asi
{
"name": "journal-app",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"test": "jest --watchAll"
},

@Crispovilla
Copy link

This error message is telling you that the file "jest.config.js" is being treated as an ECMAScript (ES) module, because it has a '.js' file extension and the "type" field in the project's package.json file is set to "module". However, the code in "jest.config.js" is not written in the syntax of an ES module, it's written in the syntax of a CommonJS module.

To resolve this error, you can either:

Change the code in "jest.config.js" to use the syntax of an ES module
Change the "type" field in package.json to "commonjs"
Rename the "jest.config.js" to use the '.cjs' file extension, so node will treat it as a CommonJS module

You should choose one of the above option which fits your project's design and goal.

@Crispovilla
Copy link

imagen

@jasvan
Copy link

jasvan commented Jan 21, 2023

Encontre que al ejecutar el comando yarn test genera un error ese error tiene una solucion facil
solo hay que cambiar la extencion del archivo config.js a config.cjs y se soluciona el problema.

@gustavcaves
Copy link

Realice la configuración como lo indicas pero me arrojo el siguiente error, image

Hola hay una solución sobre eso. cambia el nombre del archivo bablel.config.js a babel.config.cjs y haz lo mismo con el archivo de jes.config.js; cambialo a jest.config.cjs. Es lo que soluciono -> Fernando que esta en las sección de preguntas. Seria bueno que actualice esto en el readme. @Klerith Es solo una sugerencia. jejeje

Thanks

@dgerardo1
Copy link

Hola a todos, en la primera sección de Testing, Fernando agregó una nota de actualización. Dicha nota soluciona este problema sin necesidad de remover nada, la solución en la nota es la siguiente:

Cambiar extensión de los archivos jest.config.js y babel.config.js a .cjs

Saludos.

@LimbersMay
Copy link

LimbersMay commented Feb 1, 2023

Me tiene harto jest, siempre obtengo el mismo problema cada vez que tengo que hacer testing

@asgardodin74
Copy link

He realizado la configuración exactamente como indica Fernando en el video tutorial y da problemas. Secundo el comentario de Limbers, siempre obtengo el mismo problema.
image

@ariasortez
Copy link

ariasortez commented Feb 20, 2023

Por si a alguien le da el error de ES Modules con NPM, pueden hacer lo siguiente:

1. Cambien el archivo de babel.config.js a babel.config.cjs
2. Cambien el archivo de jest.config.js a jest.config.cjs

Una vez guarden los cambios les debería de funcionar.

@luiscardona88
Copy link

si funcionan los pasos solo asegurence que los archivos esten en la raiz de su proyecto

image

@callejadev
Copy link

callejadev commented Feb 28, 2023

Buenas tardes,

Llegando a esta parte del curso me he encontrado con varios errores de cara a testear "Journal App" en la sección 21 , les detallo a continuación como solventarlos.

El primer error he identificado es que con la versión de FireBase "^9.17.1" estaba recibiendo el siguiente error:

image

Revisando el error vi que el problema principal estaba en este punto, en la importación del { collection, getDocs, getFireStore }:

image

Me dispuse a revisar la documentación de FireBase y ver si esta importación había cambiado en algún modo:

https://firebase.google.com/docs/firestore/query-data/get-data?hl=es-419#web-version-9_3

Asi que vi FireBase 9 no era necesario importar el /lite de 'firebase/firestore/lite':

image

Con lo cual los imports de los siguientes ficheros quedarían así sin el /lite al final:

src\firebase\config.js:

image

src\helpers\loadNotes.js

image

Con estos cambios se resolvieron los errores.

. . .

Un error adicional que tuve, fue a la hora de realizar el fetch de la imagen que iba a descargar de la siguiente URL:

https://img.freepik.com/vector-premium/linda-pequena-abeja-dibujos-animados-volando_188253-3805.jpg?w=900

Entonces recibí el siguiente error:

image

Buscando info en StackOverflow encontre el siguiente hilo:

https://stackoverflow.com/questions/58785617/cors-error-error-cross-origin-http-localhost-forbidden-in-reactjs-jest-te

Y gracias a esta respuesta se me encendió la bombilla:

image

El problema estaba en el sitio web al que accedía, que al ser al diferente del de Fernando parece ser que faltaban ciertas headers en la petición. Asi que busque otra imagen que no tuviese este problema y listo.

Quisiera añadir a modo de comentario que entiendo que este tipos de pruebas las realiza Fernando de manera didáctica y por ello realice estas pruebas de este modo, pero por mi experiencia profesional tanto en Angular como en API Rest con Express, a la hora de testear una funcionalidad que dependa de una petición a una API externa a nuestra aplicación es preferible mockear con Jest el resultado (tanto el caso en el que se resuelve OK como en el caso que da error y entrase por el catch).

Un saludo y espero a alguien pueda servirle de ayuda algún día.

@JoseEduardoOax
Copy link

js_to_cjs

Para los que han tenido error al ejecutar lost test, Fernando Herrera ya habia hecho la anotacion de cambiar sus archivos de js a cjs

babel.config.js -----> babel.config.cjs
jest.config.js --------> jest.config.cjs

si quieren saber mas al respecto

https://lenguajejs.com/automatizadores/introduccion/commonjs-vs-es-modules/

@grmnfrnndz
Copy link

Thanks You !!!

@MicrobotsMx
Copy link

Maravilloso aporte profe. Para los que trabajan con npm y para los que hayan tenido también problemas con las configuraciones, hice esta guía: https://shard-pull-4e1.notion.site/Day-15-of-100daysofcode-b4f62b40aa804d5b91d6ecfcc5a761f6

a mi me funciono tu guia al 100, mil gracias

@johinner
Copy link

De maravilla

@AlexProcess
Copy link

Maravilloso aporte profe. Para los que trabajan con npm y para los que hayan tenido también problemas con las configuraciones, hice esta guía: https://shard-pull-4e1.notion.site/Day-15-of-100daysofcode-b4f62b40aa804d5b91d6ecfcc5a761f6

Eres un ser de luz amigo =)

@Mushroom0047
Copy link

export default { testEnvironment: 'jest-environment-jsdom', setupFiles: ['./jest.setup.js'] }

Esto me funciono gracias

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment