Marlon Estiben Varon Gonzalez
student•
hace 5 años
Gonzalo Pimentel
student•
hace 5 años
Michael Merchan
student•
hace 5 años
Marlon Estiben Varon Gonzalez
Gonzalo Pimentel
Michael Merchan
Janice Prendas
Héctor Hugo Sandoval Marcelo
Bernardo Aguayo Ortega
Kevin Parra Lopez
Jahiker Rojas
Andrés Jonathan Enríquez Jiménez
Julian Franco
Pablo Domínguez Durán
Camilo Perilla
Jorge Arango
Jorge Arango
Juan Carlos Del Rio Enciso
Erick Ospina Puertas
Gabriel Alfonso
Kevin Parra
Sergio Valadez
Jose Ceron
Manuel Durán
Manuel Durán
Nilson Diaz
Gonzalo Zavala Mendoza
Cristian Rodríguez
Carlos Morán
Yeisson Esteban Jimenez Bustos
Luis Miguel Falcon Montaño
Iván Darío Sánchez Jiménez
Juan Sebastian Obregón Cuellar
Paolo Carrion
Angelica Landazabal
Santiago Arcila
Omar Rivas
andrés eduardo betancourt bescanza
Rafael Soriano Ramírez
Jorge Zerpa
Ever Alfredo Sorto Ayala
Samuel Miranda Martínez
Bruno Kamiche
andrés eduardo betancourt bescanza
Juan Camilo Moreno
Juan Pablo Calao Pérez
Carlos David Ramírez Gómez
Jair Israel Avilés Eusebio
Me aparecia este error
It looks like you called mount() without a global document being loaded.
y lo solucione agregandole esto al "jest" en el .json
<"jest": { "setupFilesAfterEnv":[ "<rootDir>/src/__test__/setupTest.js" ], "moduleNameMapper": { "\\.(styl|css)$": "<rootDir>/src/__mocks__/styleMock.js" }, "testEnvironment": "jsdom" }>
Gracias tenía el mismo error.
Gracias, tenia el mismo error.
Los mocks son funciones que simulan acciones que deberia hacer nuestra app
Gracias por la explicación
just like that! Gracias!
Si no les funciona el mount instalen esto
npm install --save-dev --save-exact jsdom jsdom-global
Y lo importan antes de react en su test
import 'jsdom-global/register'
Graciassss!!! Esto si me funcionó!
Gracias Kevin, me funcionó.
Si quieren tener consistencia en el sintaxis de sus pruebas utilizando export/import solo tienen que hacer un ajuste de babel cambiando el .babelrc por su verison JavaScript babel.config.js. Al tener eso la sintaxis cambia un poco y queda asi:
// babel.config.js module.exports = { presets: ['@babel/preset-env', '@babel/preset-react'], plugins: ['babel-plugin-transform-class-properties'], };
Adiconalmente, si prefieren separar la configuracion de Jest a otro archivo, para separar las responsabilidades dentro de su estructura, lo pueden hacer creando un archivo jest.config.js donde pueden tambien ajustar varias opciones adicionales:
// jest.config.js module.exports = { verbose: true, collectCoverage: true, setupFilesAfterEnv: ['<rootDir>/src/__test__/setupTest.js'], moduleNameMapper: { '\\.(styl|css)$': '<rootDir>/src/__mocks__/styleMock.js', }, };
Asi congestionan menos el package.json y pueden colocar flags automaticos como -- coverage dentro de este archivo. Al final la importacion quedo como:
// styleMock.js export default {};
Ahora Jest puede resolver exportaciones utilizando sintaxis de ES6.
Súper aporte! Gracias ^^
Jest no puede parsear archivos estaticos (stylesheets, fuentes, imagenes, iconos) por lo que se tienen que mockear (reemplazar) por javascript plano
Esto sí es una explicación!
Para complementar, se debe añadir la configuración del parámetro "moduleNameMapper" para que jest use una configuración diferente para el tipo de archivos especificado, en este caso por medio de la regex \.(styl|css)$ https://jestjs.io/docs/tutorial-react-native#modulenamemapper
Yo estoy implementando jest en el proyecto que hicimos en el curso de React Hooks que es bastante parecido al repo del profesor, pero lo hice con la versión 17 de React, me salía un error en mount(<Footer />), no reconocía mount de enzyme. Tuve que instalar la versión 16 de React para que me lo reconozca, con este comando: npm i --save react@16 react-dom@16 y después instalar nuevamente: npm i --save-dev enzyme enzyme-adapter-react-16 y todo salió perfecto Espero les sirva esta solución para los que tienen proyectos con React 17+
No es una buena solución, basicamente estás proponiendo hacer una regresión de la versión de react solo para hacer funcionar jest, pero si tienes dependencias que funcionan con versiones superiores a la 16?, hay librerías para react 17
También puede usar siguiente librería y continuar con la v17 de react
npm install --save-dev @wojtekmaj/enzyme-adapter-react-17
Me saliá error y al final la solución que encontré fue usar shallow en vez de mount. Como lo entendí, shallow sirve para testear los componentes como unitarios, sin efectos en otros hijos o componentes. El código:
import React from "react"; import { shallow } from "enzyme"; import Footer from "../../components/Footer"; describe("<Footer />", () => { const footer = shallow(<Footer />); test("Footer component render", () => { expect(footer.length).toEqual(1); }); });
Esto me ayudó bastante, no encontraba como solucionar mi error. Gracias por compartir!
Muchas gracias! De esta forma pude continuar con los test
Me da el error:
It looks like you called mount() without a global document being loaded.
No estoy muy seguro del por que
ok, logre resolverlo con este articulo
Pero realmente esto es lo que me molesta de las explicaciones en platzi. se las saltan por encima y tiran de dependencias como si uno ya tuviera asumido que conoce la dependencia de enzyme y sus problemas, con suerte vengo a intentar de aprender a usar Jest
Hey ! Tienes razon , tu comentario me fue de ayuda , tenia el mismo problema al parecer los cursos donde se implementan tests en react estan algo desactualizados
Tambien encontre que jest ya viene con jsdom incluido simplemente se debe poner en su configuracion
testEnvironment: 'jsdom',
import React from 'react'; import { createStore } from 'redux'; import { Router } from 'react-router-dom'; import { Provider } from 'react-redux'; import { createBrowserHistory } from 'history'; import initialState from '../initialState'; import reducer from '../reducers'; const store = createStore(reducer, initialState); const history = createBrowserHistory(); const ProviderMock = props => ( <Provider store={store}> <Router history={history}> {props.children} </Router> </Provider> ); export default ProviderMock;
Al muchacho se le olvidó instalar history
npm i history
Este error se puede solucionar ocupando como test environment a jsdom.
"jest": { "setupFilesAfterEnv": [ "<rootDir>/src/test/setupTest.js" ], "moduleNameMapper": { "\.(styl|css)$": "<rootDir>/src/mocks/styleMock.js" }, "testEnvironment": "jsdom" }
Y con eso ya no me dio error
Excelente muchas gracias 😉😉
Muchas gracias, me fue de muchas ayuda :)
Para quienes tuvieron error con mount, deben instalar jest-environment-jsdom
npm install --save-dev jest-environment-jsdom
A partir de la version >28 de Jest, ya no se incluye jest-environment-jsdom y debe ser instalado por separado. Y luego deben agregar ´
"testEnvironment": "jsdom" en la configuración de Jest en el package.json:
"jest": { "setupFilesAfterEnv": [ "<rootDir>/src/__test__/setupTest.js" ], "moduleNameMapper": { "\\.(styl|css)$": "<rootDir>/src/__mocks__/styleMock.js" }, "testEnvironment": "jsdom" }
Muchas gracias, me sirvió
Mock Functions
/ Hola todos, aqui les dare una explicacion mas certera de lo que son las Mock Functions y para se utilizarion. / Las Mock Functions (o en español Funciones Simuladas), son funciones que nos permiten ver e inspeccionar el comportamiento de una determinada funcion que nosotros hayamos creado, las mock functions sirven para poder saber si una determinada funcion se esta ejecutando del modo que queremos que esta se ejecute o no, las mock functions son muy utiles, ya que los lenguages de programacion por defecto no nos permiten inspeccionar o testear a detalle una funcion. / Cabe recalcar que las Mock Functios nos permiten inspeccionar tanto funciones creadas apartir de function o () =>, y los metodos de una instancia de una determinada clase. / Saludos.
Hola Team, me gustaría saber si por favor me pueden ayudar debido a que me está dando un error al momento de ejecutar el primer test:
No sé si me hace falta alguna configuración extra o algo por el estilo. Yo hice la practica aparte y me funcionó pero al momento de hacerla en mi proyecto dió ese error.
Se los agradecería muchoo. ¡Muchas gracias!
ya probaste reinstalar enzyme?
Hola Angelica puedes importar las librerías de esta forma y funciona
//import { configure } from 'enzyme'; //import Adapter from 'enzyme-adapter-react-16'; const configure = require("enzyme").configure; const Adapter = require("enzyme-adapter-react-16"); configure({ adapter: new Adapter() });
Saludos !!
Si les aparece el error de mount es porque react 17 todavia no es compatible.
TypeError: Cannot read property 'child' of undefined 6 | describe("Motando footer", () => { 7 | test("Render del componente Footer", () => { > 8 | const footer = mount(<Footer />);
https://github.com/enzymejs/enzyme/issues/2462
Lastimosamente lo que me toco fue degradar react y dom a la version 16
npm i react@16.13.1 react-dom@16.13.1
Excelente aporte, me sentí bastante frustrado
Si les sale este error->
" It looks like you called mount() without a global document being loaded."
see soluciona:
instalar jsdom: npm install --save-dev --save-exact jsdom jsdom-global
En Footer.test.js: import 'jsdom-global/register'; IMPORTAR EN LA PRIMERA LINEA, INCLUSO ANTES DE IMPORTAR REACT
Aca esta la documentación de enzyme explicando el porque de este cambio https://enzymejs.github.io/enzyme/docs/guides/jsdom.html
HAPPY CODING! :)
no entendi lo del punto min 4:55
Las clases de css se llaman con un punto. (.Class)
Alguna solución ? :(
Me paso los mismo, investigando un poco me di cuenta que no es compatible con la version 17 de react, asi que tuve que instalar la version 16
npm i react@16.13.1 react-dom@16.13.1
Como debería implementarlo para trabajar con imágenes?
Debes agregar en la configuración de jest lo siguiente:
"moduleNameMapper": { "\\.(jpg|ico|jpeg|png|gif|svg)$": "<rootDir>/__mocks__/fileMock.js" }
Y el contenido de ese archivo fileMock.js debería exportar un string vacío:
export default ''
Para más información, puedes ver la clase número 8
¿Cómo creo un mock cuando utilizo imágenes?
Si lo que quieres testear es una cambio en alguna imagenes basado en algun evento, te recomiendo investigar sobre snapshot testing y visual regression testing.
jest-image-snapshot es una libreria muy popular.