No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Crear mocks

8/16
Recursos

Aportes 49

Preguntas 11

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

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

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'

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.

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

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+

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

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

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

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!

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

Si les sale este error->
" It looks like you called mount() without a global document being loaded."

see soluciona:

  1. instalar jsdom:
    npm install --save-dev --save-exact jsdom jsdom-global

  2. 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! 😃

Les dejo la documentacion de los Mock Functions (Funciones Simuladas) https://jestjs.io/docs/mock-functions

Al igual que a otros compañeros, tuve el error “It looks like you called mount() without a global document being loaded”, parece estar relacionado con la necesidad de enzyme de utilizar un DOM. Lo solucione corriendo en la consola el comando:

npm install jest-environment-jsdom

y luego especificando el ambiente de pruebas en el archivo package.json:

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

Pregunta:
Por que cuando corro el comando para hacer el test, me identifica el archivo setupTest.js como si fuera un archivo de test y me tira un error?

si usan otros preprocesadores como sass o less seria asi
"^.+\.(css|styl|less|scss)$": “<rootDir>/mocks/fileMock.js”

9:42 “Vamos a utilizar history para llamar a create browser history que acabamos de añadir, y esto es una función que nos va a permitir utilizarla…”

Me van a perdonar, pero voy a necesitar un poco más de información al respecto… este curso debería llamarse Curso de transcribir lo que el profesor dice…

Si les da el error: “Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none.”

Se puede implementar esto, dentro de Footer.test.js

import { mount, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

No es difícil, pero sí es interesante cómo hay que cambiar un poco la mentalidad de ver el código. En lo personal me ha gustado hasta ahora cómo va todo

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;

De este proyecto tengo la versión con Hook y no con Redux, tendré que hacer adecuaciones.

Tomando el ejemplo:

describe('<Footer />', () => {
  const footer = mount(<Footer />);
  
  test('footer successfully mounted', () => {
      expect(footer.length).toEqual(1);
  });
});

versus

describe('<Footer />', () => {
  let footer;
  
  // Does it have any performance penalty this approach
  beforeEach(() => {
      footer = mount(<Footer />);
  });
  
  test('footer successfully mounted', () => {
      expect(footer.length).toEqual(1);
  });

  // more tests ...
});

Al montar <Footer /> en cada prueba:
Puede tener alguna penalización de performance en la ejecución de las pruebas?

Yo tube que instalar el gest global así para que me funcionara:

npm install jsdom-global --save-dev

projecto desactualizado, lo cual genera muchos errores en las pruebas que se generan

Después de varios conflictos a la hora de usar createStore de Redux, me decía que no era una función, después de intentar varias cosas , el ajustar las versiones fue lo que me resulto:

"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.15.1",
"jest": "^24.9.0"

También hacer caso omiso al IDE, ya que el createStore me aparece tachado y dice que es recomendado usar redux toolkit.

2022:

// dependencia de jest
npm install --save-dev jest-environment-jsdom
// jest.config.js
module.exports = {
  verbose: true,
  collectCoverage: true,
  setupFilesAfterEnv: ['<rootDir>/src/__test__/setupTest.js'],
  moduleNameMapper: {
    '\\.(styl|css)$': '<rootDir>/src/__mocks__/styleMock.js',
  },
  testEnvironment: 'jsdom',
};

con react 18 parece que ya no esta funcionando enzyme, por lo que todo el curso pierde sentido, seria bueno actualizarlo

Para aquellos que tienen el siguiente error:

    Configuration error:

    Could not locate module ../styles/components/Footer.styl mapped as:
    /home/jesuscast/cursosPlatzi/testing/jest/platzi-store/src/__mocks__/styleMock.js.

    Please check your configuration for these entries:
    {
      "moduleNameMapper": {
        "/\.(styl|css)$/": "/home/jesuscast/cursosPlatzi/testing/jest/platzi-store/src/__mocks__/styleMock.js"
      },
      "resolver": undefined
    }

Yo lo solucione sacando el archivo styleMock.js de la carpeta /mocks a la carpeta /src, debe quedar asi : “<rootDir>/src/styleMock.js”, luego de esto les aparece el error dde mount(), para lo cual hay muchas soluciones en los demas aportes de los companeros. respecto a esto tengo dos preguntas: es correcto como yo lo solucione? y por que pasa esto?, agradecería sus comentarios

Aportando a la solucion de Marlon tambien hay que descargar jest-environment-jsdom para hacerlo funcionar.

npm i jest-environment-jsdom -D

Para los que les da erro con mount() lo que hay que hacer es instalar jest-environment-jsdom

npm i -D jest-environment-jsdom

y agregar esto en el archivo del test antes del import React

/**
 * @jest-environment jsdom
*/

No bajes tu versión de React si te sale el error de Mount.

Vi que a varios les sale el error de mount. Varios proponen la misma solución de agregar en la configuración lo de testEnvironment, pero a mi no me funcionó solo con esto, por lo que estos fueron los pasos que seguí para solucionar mi error:

  1. Agregué la línea de testEnvironment en el package.json de la siguiente manera:
"jest": {
    "setupFilesAfterEnv":[
      "<rootDir>/src/__test__/setupTest.js"
    ],
    "moduleNameMapper": {
      "\\.(styl|css)$": "<rootDir>/src/__mocks__/styleMock.js"
    },
    "testEnvironment": "jsdom"
  }

.
2. Posterior a ello ahora me salía el error que sigue:

Validation Error:

  Test environment jest-environment-jsdom cannot be found. Make sure the testEnvironment configuration option points to an existing node module.

  Configuration Documentation:
  https://jestjs.io/docs/configuration


As of Jest 28 "jest-environment-jsdom" is no longer shipped by default, make sure to install it separately.

Lo cual fue fácil de solucionar pues si lees el error, verás que pone que jest-environment-jsdom ya no se incluye en la instalación de jest (a diferencia de lo que ponen en los comentarios, que deben estar desactualizados al momento de que escribo esto). Solamente tienes que poner en la terminal: npm install jest-environment-jsdom.
.
Con esto YA NO DEBES BAJAR tU VERSION DE REACT.

Si de casualidad el test les arroja este error :

FAIL  src/__test__/components/Footer.test.js
  ● Test suite failed to run

    Cannot find module 'cheerio/lib/utils' from 'node_modules/enzyme/build/Utils.js'     

    Require stack:
      node_modules/enzyme/build/Utils.js
      node_modules/enzyme/build/ReactWrapper.js
      node_modules/enzyme/build/index.js
      src/__test__/setupTest.js

      at Resolver._throwModNotFoundError (node_modules/jest-resolve/build/resolver.js:491:11)

para solucionar lo que hice fue agregar cheerio como dependencia de desarrollo en el archivo package.json:

"cheerio": "^1.0.0-rc.3", 

luego ejecutar un npm install y probar el test, si aun así persiste entonces nos dijrijimos al directorio ‘‘node_modules/enzyme/build/Utils.js’’ y en el archivo Utils sustituir la linea 84

var _utils = require('cheerio/lib/utils.js'); // sustituir esta linea por la de abajo
var _utils = require('../../cheerio/lib/utils');

y de esta forma ya si deberia funcionar sin problemas.

En qué momento agregaron redux al projecto? venía siguiendo el curso con mi propio proyecto de lo que había hecho en el curso de react hook y ahora me perdí cuando mencionaron redux. Muy mal actualizado el contenido.

Por que no podemos usar el provider por defecto?

Deben instalar el paquete de history

npm i history

En mi caso me daba error con el codigo de esta manera:
ReferenceError: footer is not defined

describe("-- Test Footer", () => {  
  test("-- Render Component Footer", () => {
    const footer = mount(<Footer/>)
    expect(footer.length).toEqual(1)
  });

  test("-- Render Title", () => {
    expect(footer.find('.Footer-title').text()).toEqual('Platzi Store')
  })
})

Moviendo la constante footer a otro lugar, quedando de esta manera:

describe("-- Test Footer", () => {
  const footer = mount(<Footer/>)
  
  test("-- Render Component Footer", () => {
    expect(footer.length).toEqual(1)
  });

  test("-- Render Title", () => {
    expect(footer.find('.Footer-title').text()).toEqual('Platzi Store')
  })
})

Y asi poder correr mis pruebas.

If you just want to copy and paste only

#Footer.test.js

import React from "react";
import { mount } from "enzyme";
import Footer from "../../components/Footer";

describe("Footer tests",()=>{
  const footer = mount(<Footer/>);

  test("1. Footer component render", ()=>{
    expect(footer.length).toEqual(1)
  })
  test("2. Title render",()=>{
    expect(footer.find(".Footer-title").text()).toEqual("Platzi Store")
  })
})

If you just want to copy and paste only

Provider.Mock.js

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 providerMocks = props => {
  <Provider store={store}>
    <Router history={history}>
      {props.children}
    </Router>
  </Provider>
};

export {providerMocks};

Me dio este error

Al parecer el curso está desactualizado pero lo pude resolver utilizando la dependencia que mencionan en este post
https://lifesaver.codes/answer/it-looks-like-you-called-mount()-without-a-global-document-being-loaded

¿Como puedo ejecutar el test usando yarn ?

La mayoría de las cosas me han quedado claras pero luego Oscar habla mucho en terminos de “this”.

El porqué necesitamos otros mocks

Y se pueden testear estilos?

se que estamos removiendo eso aca, pero se puede?

Es necesario usar webpack para este tipo de test?

Mocks

Para los que estén utilizando el Test Suite de VSCode y les de problemas el archivo de estilos, pueden hacer esto:

  1. Agregar a su carpeta (si no existe, crearla) de .vscode el archivo settings.json con:
{
    "jest.pathToJest": "npm test --"
}
  1. Cambiar su archivo .babelrc por babel.config.js con el contenido:
module.exports = function babelConfig(api) {
  api.cache(true);
  return {
    'presets': [
      [
        '@babel/preset-env',
        {
          'modules': false,
        },
      ],
      '@babel/preset-react',
    ],
    'plugins': [
      '@babel/plugin-proposal-class-properties',
    ],
    'env': {
      'test': {
        'presets': [
          '@babel/preset-env',
          '@babel/preset-react',
        ],
      },
    },
  };
};