Implementar provider mock

Janice Prendas

student•

Probablemente muchos se hagan esta pregunta: ¿Cuándo utilizar mount y cuándo utilizar shallow? . mount --> Cuando necesitas el DOM shallow --> Solo necesitas algo particular del componente. No ocupas todo el DOM

Luis Martinez

student•

Janice, das muy buenos aportes, gracias. Complementando, chequen: https://stackoverflow.com/questions/38710309/when-should-you-use-render-and-shallow-in-enzyme-react-tests

ANTHONY JEAMPIER RANGEL RODRIGUEZ

student•

Excelente, gracias!

Janice Prendas

student•

Shallow permite traer elementos y probarlos como una unidad. Es útil cuando solo necesito algo particular de ese componente y no necesito toda su estructura y elementos del DOM

Luis Felipe Hernandez Cristancho

student•

La prueba solo me funcionó poniendo un

return( <Provider store={store}> <Router history={history}>
{props.children} </Router> </Provider> )

por si le pasa a alguien

Wilmer Diaz

student•

Igual a mí compañero, gracias por el aporte. Queda algo así:

const store = createStore(reducer, initialState);
const history = createBrowserHistory();
const ProviderMock = (props) => {
  return (
    <Provider store={store}>
      <Router history={history}>{props.children}</Router>
    </Provider>
  );
};

Diego Grueso

student•

Gracias chicos, estuve 1h, y no encontraba el por que me generaba ese error.

Paolo Carrion

student•

Formas de crear Mock Functions

/ En jest, podemos crear mock functions de tres formas distintas, esto se debe a que aunque todas tienen como objetivo testear funciones, hay diferentes formas de crear funciones en JavaScript. /

jest.fn(): Este método es la forma principal de crear una función de imitación, si declaramos la función de imitación de esta manera, no es obligatorio añadir una implementación (conocida como la función que espiamos también), pero como es normal añadimos la implementación, y para ello, tenemos que pasar la función como parámetro del método. / Ejemplo: /

const mockFunction = jest.fn((a,b) => {
  return a + b
})

jest.spyOn(): Este método es otra forma de crear una función mock, sin embargo, este se enfoca en mockear los métodos de alguna instancia creada como de su clase principal, y este método solo puede ser usado para ellas, cabe mencionar que no podemos usar este método para el modelo de la clase original, solo para sus instancias, este método recibe dos parámetros, el primero es la instancia declarada como de la clase principal y el segundo es el nombre del método que vamos a espiar. / Ejemplo: /

class Computer {

  constructor(brand, size, price, ram) {
    this.brand = brand;
    this.size = size;
    this.price = price;
    this.ram = ram;
  }

  getInformation(){

    return {
      brand: this.brand,
      size: this.size,
      price: this.price,
      ram: this.ram,
    }

  }

  setInformation(brand, size, price, ram) {
    
    this.brand = brand;
    this.size = size;
    this.price = price;
    this.ram = ram;

    return {
      brand: this.brand,
      size: this.size,
      price: this.price,
      ram: this.ram,
    }

  }
}

const MackBookPro = new Computer('Apple', '3000px', 5000, 36)

const getInformationSpier = jest.spyOn(MackBookPro, 'getInformation')
const setInformationSpier = jest.spyOn(MackBookPro, 'setInformation')

test('testing the methods of the class computer', () => {

  expect(MackBookPro.getInformation()).toEqual({
    brand: 'Apple',
    size: '3000px',
    price: 5000,
    ram: 36,
  })

  expect(MackBookPro.setInformation('Toshiba', '2500px', 1000, 20)).toEqual({
      brand: 'Toshiba',
      size: '2500px',
      price: 1000,
      ram: 20,
  })

  expect(getInformationSpier).toHaveBeenCalled()

  expect(setInformationSpier).toHaveBeenCalledTimes(1)

})

jest.mock(): Este método sirve para burlarse automáticamente de todas las funciones (sólo funciones autosuficientes, no métodos de alguna clase) que tenga un determinado fichero, sin necesidad de burlarse de todas y cada una de las funciones de ese determinado fichero, este método recibe dos parámetros (el segundo parámetro no es obligatorio), el primero es el fichero cuyas funciones queremos burlar, y el segundo es una función que se ejecutará en lugar de todas las funciones que hayamos definido dentro del otro fichero y que queramos probar, si sólo utilizamos el primer parámetro, entonces cuando utilicemos las funciones del fichero importado, éstas no devolverán nada, ya que las funciones fueron burladas, y si queremos obtener un determinado valor después de utilizar las funciones del fichero importado, tenemos que utilizar el segundo parámetro, pero éste tiene que devolver una función burlada utilizando jest. fn(). / Ejemplo 1: /

// anotherFile.js

const addition = (a, b) => {
  return a + b;
}

const subtraction = (a, b) => {
  return a - b;
}

module.exports = {
    addition, 
    subtraction,
}

jest.mock('./anotherFile')

const additionFunction = require('./anotherFile').addition
const subtractionFunction = require('./anotherFile').subtraction

additionFunction(1,2)
additionFunction(3,4)

subtractionFunction(4,3)
subtractionFunction(2,1)

test('testing mathematical functions', () => {

  console.log(additionFunction.mock)
  console.log(subtractionFunction.mock)

  expect(additionFunction).toHaveBeenCalled()
  expect(subtractionFunction).toHaveBeenCalled()

})

jest.createMockFromModule(): Este método (también conocido bajo el alias .genMockFromModule()), nos permite transformar las funciones burladas de otro fichero por jest. mock() en funciones normales, de esta manera, serán funciones normales o funciones no burladas y funciones burladas al mismo tiempo, lo que significa que podemos manejarlas como si fueran funciones normales, y además utilizar las propiedades y métodos de una función burlada, esto es útil ya que cuando burlamos todas las funciones de un determinado fichero, estas funciones no pueden ser utilizadas como funciones normales, por ejemplo, esto hace que no obtengamos lo que devuelven las funciones burladas por sí mismas, ya que al ser burladas, este método solo debe recibir un parámetro, este parámetro es el archivo cuyas funciones queremos burlar, entonces para des-bloquear la función de ese archivo, tenemos que invocar esas funciones, y usarlas como variables, y luego debemos usar jest. fn(), y como parámetro de jest.fn(), tenemos que implementar el código de la función original que fue mockeada, y ahora, podemos usar las funciones como si fueran funciones normales y como funciones mockeadas, además de lo que dijimos anteriormente, si estamos exportando diferentes tipos de datos de un determinado archivo, también podemos usarlos en otro archivo, al usar este método, sólo necesitamos llamar a esos datos, pero el método trata los diferentes tipos de variables de diferentes maneras, aquí explicamos eso: / Función: Crea una nueva función, y esta será burlada, por lo que los parámetros de dicha función serán eliminados y por lo tanto cuando intentemos acceder a los parámetros, estos no aparecerán, y cuando la función lo sea, esta devolverá undefined. Estos cambios también se aplican a las funciones async. / Clase: Crea una nueva clase, se mantendrá la estructura de la clase original, pero se burlarán todas las propiedades y los métodos de sus instancias, por lo tanto lo que ocurría con la función normal al ser burlada también ocurrirá con los métodos de la clase burlada. / Objeto: Crea un nuevo objeto, que será exactamente igual al objeto original, por lo que se mantienen las claves del objeto y se burlan los valores de las claves. / Array: Crea un nuevo array vacío, ignorando el original. / Primitiva: Crea una nueva variable con el mismo valor primitivo que la variable original. / Ejemplo 1: /

// anotherFile.js

const addition = (a, b) => {
  return a + b;
}

const subtraction = (a, b) => {
  return a - b;
}

module.exports = {
    addition, 
    subtraction,
}

const mathematicalFunctions = jest.createMockFromModule('./anotherFile')

mathematicalFunctions.addition = jest.fn((a, b) => {
  return a + b;
})

mathematicalFunctions.subtraction = jest.fn((a, b) => {
  return a - b;
})

const additionFunction = mathematicalFunctions.addition
const subtractionFunction = mathematicalFunctions.addition

test('testing an addition function', () => {

  console.log(additionFunction(12,23))
  console.log(additionFunction.mock)

  console.log(subtractionFunction(20,5))
  console.log(subtractionFunction.mock)

})

/ Ejemplo 2: /

const typesOfData = jest.createMockFromModule('./anotherFile');

test('should run example code', () => {

  expect(typesOfData.theFunction.name).toEqual('workSomethingOut');
  expect(typesOfData.theFunction.length).toEqual(0);

  expect(typesOfData.theClass.constructor.name).toEqual('User');
  expect(typesOfData.theClass.toGreet.name).toEqual('toGreet');

  expect(typesOfData.theObject).toEqual({
    brand: 'Apple',
    price: 1000,
  });

  expect(typesOfData.theArray.length).toEqual(0);

  expect(typesOfData.theNumber).toEqual(12);

  expect(typesOfData.theString).toEqual('RAM');

  expect(typesOfData.theBoolean).toEqual(true);
});

/ Saludos.

Sneyder Joaquin Huertas Rodríguez

student•

Gracias!!

Cristian Caballero

student•

Estoy teniendo este error en el test de "Render del Titulo Header"

Method “text” is meant to be run on 1 node. 0 found instead.

Revise varias veces y el codigo es el mismo

Julian Estrada

student•

Hola Cristina a mi también me salia el error y sabe que es ingresa a tu archivo de ProviderMock.js y mira que todo este bien escrito, yo tenia mal la palabra **children **estaba así childern.

Me cuentas si eso te ayudo

Cristian Caballero

student•

de hecho si, fue algo asi mi error, gracias

Sebastián Mera

student•

El curso parece un tutorial en lugar de un curso.

Johan Quijano

student•

Como debería ser un curso entonces?

César Palma

student•

una introducción explicando la teoría necesaria antes de codificar mas que ser un copia y pega. Es un curso antiguo, en los nuevos cursos oscar ya introduce correctamente las clases

Martín David Roldán

student•

Si tienen el siguiente error:

 ProviderMock(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

Lo pude solucionar agregando un return en el ProviderMock, quedando asi:

return (
        <Provider store={store}>
            <Router history={history}>
                {props.children}
            </Router>
        </Provider>
    )

Jose Ceron

student•

Muchas gracias por tu aporte, fue de gran ayuda.

Juan Hernandez

student•

Crack martin

Mario Eduardo Contreras Serrano

student•

En la última prueba, en la de la función, no es necesario envolver el componente <Product/> con el <ProviderMock />, ya que al hacer "Render" con la funcion mount, se le estan pasando los dato a travez de las props del componente, dejando de lado Redux para adquirir esos datos!

De igual forma al revisar el archivo de <Product/> se puede notar que en ningún lado se esta usando Redux.

Al usar shallow es lo mísmo, mientras le pasemos props al componente se puede prescindir del <ProviderMock/>.

Andrés Felipe Eslava Zuluaga

student•

Es verdadero:

Muchas gracias!

describe('<Product />', () => {
  test('Render de component Product', () => {
    const product = shallow(
      <ProviderMock>
        <Product />
      </ProviderMock>,
    );
    expect(product.length).toEqual(1);
  });

  test('Comprobar el botón de comprar', () => {
    const handleAddToCart = jest.fn();
    const wrapper = mount(
      <Product 
        product={ProductMock}
        handleAddToCart={handleAddToCart}
      />
    );
    wrapper.find('button').simulate('click');
    expect(handleAddToCart).toHaveBeenCalledTimes(1);
  })
});

Mario Eduardo Contreras Serrano

student•

¡Al cotrario @felipe_ez, es un placer ayudar! 🌈

Alessandra Amicarella

student•

Cual es la diferencia entre Jest y Enzyme?

Andres Gomez Hernandez

student•

Jest es un framework que nos permite testear javascript, convinacion de las palabras (javascript, test) -> jest.

enzyme es una lib utilitaria que te permite acceder de una manera sencilla de obtener elementos y hacer aserciones.

Pablo Nicolás Alonso

student•

Error: Veo que a nadie le salió lo mismo...

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

    Invariant failed: Browser history needs a DOM

       8 |
       9 | const store = createStore(reducer, initialState);
    > 10 | const history = createBrowserHistory();
         |                 ^
      11 |
      12 | const ProviderMock = props => (
      13 |   <Provider store={store}>

      at invariant (node_modules/tiny-invariant/dist/tiny-invariant.cjs.js:13:11)
      at createBrowserHistory (node_modules/history/cjs/history.js:273:16)
      at Object.<anonymous> (src/__mocks__/ProviderMock.js:10:17)
      at Object.<anonymous> (src/__test__/components/Header.test.js:3:1)

Joe Harry Mancera Monroy

student•

hola, ¿Lograste arreglarlo?, estoy en lo mismo hahaha

Joe Harry Mancera Monroy

student•

logrè agregarlo con lo indicado aquí

Agregué jsdom al proyecto. Me quedó el ProviderMok algo así.

import 'jsdom-global/register';
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

const ProviderMock = (props) => (
  <BrowserRouter history={history}>
    {props.children}
  </BrowserRouter>
);

export default ProviderMock;

Flor Dulcinea Peña Campos

student•

¿Cómo decidir qué cosas probar en una aplicación?

Camilo Perilla

student•

Cosas que cuenten con un comportamiento muy personalizado. Por ejemplo un componente que dispache cierto tipo de acciones a la store de redux o un componente que genere cambios visuales por su cambio de estado. Recuerda que tus tests deben asemejarse a como tu aplicación es usada por los usuarios.

Cristian Blandón

student•

En la clase ¿Qué es un Test? ¿Qué tipos de Test Existen? Jest, Óscar responde a la pregunta ¿Qué debemos de probar?

Muy recomendado volver si quedaron dudas.

Jeremy Zelaya

student•

Si se topan el error Invariant failed: Browser history needs a DOM, pueden usar createMemoryHistory.

Fuente: https://stackoverflow.com/questions/59508837/invariant-failed-browser-history-needs-a-dom

Danilo Valenzuela

student•

¿Cual es la diferencia entre shallow y mount?

Francisco Javier Trabol Muñoz

student•

shallow es una función de Enzyme que se utiliza para probar componentes de forma aislada, ya que no renderiza los subcomponentes.

mount es lo contrario

mas info https://guias.makeitreal.camp/react/testing

David Alejandro Velázquez Villegas

student•

Hola ¿Por qué El profesor uso <ProviderMock/> para el componente <Product/> si este no usa redux por dentro? de hecho hice la prueba quintándolo y los test pasaron

Martín David Roldán

student•

El componente padre (products) depende del store de productos que se alojan en Redux. Por lo tanto a cada componente <Product /> se le pasa esta información.

Los tests pasan ya que la data ya fue pasada a cada item y no haria falta ponerlo con el mock. Si se deberia agregar el provider al componente padre.

mauroportellli

student•

Teniendo en cuenta que es costoso tener una cobertura del 100 de tus componentes. Como hacer una cobertura inteligente. Cuales son las funciones o logica de los componentes que son mas relevantes para tester? La logica mas complejas, lo que suele fallar. lo critico?

Muy interesante esta clase

Jaime David Burbano Montoya

student•

Deberías tener una cobertura de lo importante. Principalmente lo relacionado con el core de negocio, y a partir de ahí, todo lo que sea fundamental para que tu aplicación, pero que no necesariamente es relacionado al core de negocio

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

student•

La verdad no estoy seguro si la prueba de simular el click sea del todo cierta o que realmente compruebe el funcionamiento del botón, me explico:

Si comentan la linea de código donde simulan el click igual la prueba sigue siendo exitosa, de hecho cambié el número de veces que se llama la función solo para generar error y pareciera que el agregar la función al evento onClick del boton se considerara como un llamado a la función. También probe usando un expect diferente al del ejercicio. Adjunto código y outputs para verificar entre todos este caso,

test('Test button Add to cart', () => {
    const handleAddToCart = jest.fn();
    const wrapper = mount(
      <ProviderMock>
        <Product product={ProductMock} handleAddToCart={handleAddToCart} />
      </ProviderMock>,
    );
    //wrapper.find('button').simulate('click');
    //expect(handleAddToCart).toHaveBeenCalledTimes(1);
    expect(handleAddToCart.mock.calls.length).toEqual(1);
  });

	# con cualquiera de los dos expect siempre se llama una vez a la función y el test es positivo sin simular un click

Esta salida es cuando cambio el valor a 2 para verificar cuantos llamados a la función se estan haciendo, como ven sin necesidad de simular el click, ya hay un llamado.

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

student•

Encontré lo que sucede. El problema está en el componente, si observan como el boton recibe la función esta se ejecuta automaticamente al carga el componente

 <button type="button" onClick={handleAddToCart(product)}>
      Comprar
    </button>

Diferente a

 <button type="button" onClick={()=> handleAddToCart(product)}>
      Comprar
    </button>

En conclusión la prueba si funciona como la vimos en clase, pero la forma en que recibe la función el componente no es la forma recomendada para instanciar la acción del boton.

César Palma

student•

buen seguimiento ivan

mario fernando robayo restrepo

student•

para poder realizar el curso es necesario tener las Sifuentes versiones


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

Alejandro Campuzano

student•

Nota El providerMock sirve para dar conexto a enzime de los keywords usados por redux en la app (como “store”). Corri un test sin provicerMock y da el siguiente error

Could not find “store” in the context of “Connect(Header)”. Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Header) in connect options

Al añadir el mock evitamos este tipo de errores donde nuestra testing library podria no entender el codigo

Deymer Hernandez

student•

La diferencia entre shallow y mount es que shallow prueba los componentes de forma aislada de los componentes secundarios que representan, mientras que mount profundiza y prueba los elementos secundarios de un componente. En el caso de shallow, esto significa que si el componente principal representa otro componente que no se procesa, se seguirá procesando una representación superficial en el elemento principal.

Jhon Alexander Alvarez Romero

student•

tengo este problema, alguien le paso y lo pudo resolver?

ReactShallowRenderer render(): Shallow rendering works only with custom components, but the provided element type was `object`.

       6 | describe('<Header />', () => {
       7 |   test('Prueba de Header', () => {
    >  8 |     const header = shallow(
         |                    ^
       9 |       <ProviderMock>
      10 |         <Header />
      11 |       </ProviderMock>,```

Juan Pablo Celiz

student•

Hola! No me ha pasado, pero estuve averiguando y posiblemente sea que está mal exportado el componente o que no esté recibiendo las props correctas. Te dejo un artículo donde han resuelto el mismo error, suerte!

Implementar provider mock

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