Crear mocks

Marlon Estiben Varon Gonzalez

student•

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"
  }>

Gonzalo Pimentel

student•

Gracias tenía el mismo error.

Michael Merchan

student•

Gracias, tenia el mismo error.

Janice Prendas

student•

Los mocks son funciones que simulan acciones que deberia hacer nuestra app

Héctor Hugo Sandoval Marcelo

student•

Gracias por la explicación

Bernardo Aguayo Ortega

student•

just like that! Gracias!

Kevin Parra Lopez

student•

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'

Jahiker Rojas

student•

Graciassss!!! Esto si me funcionó!

Andrés Jonathan Enríquez Jiménez

student•

Gracias Kevin, me funcionó.

Julian Franco

student•

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.

Pablo Domínguez Durán

student•

Súper aporte! Gracias ^^

Camilo Perilla

student•

Jest no puede parsear archivos estaticos (stylesheets, fuentes, imagenes, iconos) por lo que se tienen que mockear (reemplazar) por javascript plano

Jorge Arango

student•

Esto sí es una explicación!

Jorge Arango

student•

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

Juan Carlos Del Rio Enciso

student•

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+

Erick Ospina Puertas

student•

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

Gabriel Alfonso

student•

También puede usar siguiente librería y continuar con la v17 de react

npm install --save-dev @wojtekmaj/enzyme-adapter-react-17

Kevin Parra

student•

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);
  });
});

Sergio Valadez

student•

Esto me ayudó bastante, no encontraba como solucionar mi error. Gracias por compartir!

Jose Ceron

student•

Muchas gracias! De esta forma pude continuar con los test

Manuel Durán

student•

Me da el error:

It looks like you called mount() without a global document being loaded.

No estoy muy seguro del por que

Manuel Durán

student•

ok, logre resolverlo con este articulo

https://lifesaver.codes/answer/it-looks-like-you-called-mount()-without-a-global-document-being-loaded

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

Nilson Diaz

student•

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',

Gonzalo Zavala Mendoza

student•

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;

Cristian Rodríguez

student•

Al muchacho se le olvidó instalar history

npm i history

Carlos Morán

student•

Este error se puede solucionar ocupando como test environment a jsdom.

Jest ya viene con jsdom, y solo es de agregarlo en su configuración, de modo que la mía es:

"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

Yeisson Esteban Jimenez Bustos

student•

Excelente muchas gracias 😉😉

Luis Miguel Falcon Montaño

student•

Muchas gracias, me fue de muchas ayuda :)

Iván Darío Sánchez Jiménez

student•

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"
  }

Juan Sebastian Obregón Cuellar

student•

Muchas gracias, me sirvió

Paolo Carrion

student•

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.

Angelica Landazabal

student•

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!

Santiago Arcila

student•

ya probaste reinstalar enzyme?

Omar Rivas

student•

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 !!

andrés eduardo betancourt bescanza

student•

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

Rafael Soriano Ramírez

student•

Excelente aporte, me sentí bastante frustrado

Jorge Zerpa

student•

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! :)

Ever Alfredo Sorto Ayala

student•

no entendi lo del punto min 4:55

Samuel Miranda Martínez

student•

Las clases de css se llaman con un punto. (.Class)

Bruno Kamiche

student•

Me sale ese error

Alguna solución ? :(

andrés eduardo betancourt bescanza

student•

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

https://github.com/enzymejs/enzyme/issues/2462

Juan Camilo Moreno

student•

Como debería implementarlo para trabajar con imágenes?

Juan Pablo Calao Pérez

student•

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

Carlos David Ramírez Gómez

student•

¿Cómo creo un mock cuando utilizo imágenes?

Jair Israel Avilés Eusebio

student•

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.

<"jest": {
    "setupFilesAfterEnv":[
      "<rootDir>/src/__test__/setupTest.js"
    ],
    "moduleNameMapper": {
      "\\.(styl|css)$": "<rootDir>/src/__mocks__/styleMock.js"
    },
    "testEnvironment": "jsdom"
  }> 

// jest.config.js
module.exports = {
  verbose: true,
  collectCoverage: true,
  setupFilesAfterEnv: ['<rootDir>/src/__test__/setupTest.js'],
  moduleNameMapper: {
    '\\.(styl|css)$': '<rootDir>/src/__mocks__/styleMock.js',
  },
};

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);
  });
});

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;

"jest": {
    "setupFilesAfterEnv": [
      "<rootDir>/src/__test__/setupTest.js"
    ],
    "moduleNameMapper": {
      "\\.(styl|css)$": "<rootDir>/src/__mocks__/styleMock.js"
    },
    "testEnvironment": "jsdom"
  }

//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() });

TypeError: Cannot read property 'child' of undefined

       6 | describe("Motando footer", () => {
       7 |   test("Render del componente Footer", () => {
    >  8 |     const footer = mount(<Footer />);

Crear mocks

Bienvenida

Bienvenido al Curso de Jest

¿Qué es un Test? ¿Qué tipos de Test Existen? Jest

Introducción a Jest

Preparación del entorno con Jest

Implementando pruebas para Boolean y Array

Implementando pruebas a promesas

Watch y Coverage

Usando Jest con React

Preparar proyecto

Crear mocks

Implementar provider mock

Snapshot

Probar Actions

Probar Reducers

Probar peticiones fetch

Deploy y CI con Travis

Jest + CI

Probando el proyecto antes de hacer deploy

Recapitulación y cierre