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?

o inicia sesi贸n.

Me aparecia este error
It looks like you called mount() without a global document being loaded.
y lo solucione agregandole esto al 鈥渏est鈥 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:

鈥渏est鈥: {
鈥渟etupFilesAfterEnv鈥: [
"<rootDir>/src/test/setupTest.js"
],
鈥渕oduleNameMapper鈥: {
"\.(styl|css)$": 鈥<rootDir>/src/mocks/styleMock.js鈥
},
鈥渢estEnvironment鈥: 鈥渏sdom鈥
}

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 鈥榡sdom-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 鈥淚t 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 鈥淰amos 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: 鈥淓nzyme 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 鈥樷榥ode_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 鈥渢his鈥.

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',
        ],
      },
    },
  };
};