Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Crear mocks

8/16
Recursos

Aportes 35

Preguntas 11

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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 “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 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.

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 [email protected] [email protected]
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+

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

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;

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

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

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!

Al muchacho se le olvidó instalar history

npm i history

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.

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?

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.

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

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 ?

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?

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