Probar Actions

Clase 11 de 16 • Curso de Unit Testing con Jest en React

Contenido del curso

Bienvenida

Introducción a Jest

Usando Jest con React

Deploy y CI con Travis

Tomar examen

Comentarios

Julian Carelli

student•

Lo hice de esta manera para poder simplificar el código un poco mas :P

Reto completado :D

silvana murgo

student•

Si son de pifiarle a los nombres como yo, una buena practica es poner los string referentes a las acciones en un archivo de "types" src/types/actionsTypes.js

export const ADD_TO_CART = "'ADD_TO_CART'";
export const REMOVE_FROM_CART = 'REMOVE_FROM_CART';

luego en reducer, actions y test simplemente lo exportan

import { ADD_TO_CART, REMOVE_FROM_CART } from '../types/actionsTypes';

listo si algo sale mal o se modifica el nombre este string se encuentra definido en 1 solo lugar de esta manera evitamos errores y centralizamos las definiciones :D

Pedro Carreño

student•

Muy de acuerdo con tu Tip 👍🏻

Seba Cardoso

student•

Reto:

import actions from '../../actions/';
import ProductMock from '../../__mocks__/ProductMock';

describe('Actions', () => {
  const payload = ProductMock;
  test('addToCart Action', () => {
    const expected = {
      type: 'ADD_TO_CART',
      payload,
    };
    expect(actions.addToCart(payload)).toEqual(expected);
  });
  test('removeFromCart', () => {
    const expected = {
      type: 'REMOVE_FROM_CART',
      payload,
    };
    expect(actions.removeFromCart(payload)).toEqual(expected);
  });
});

Usuario anónimo

user•

import actions from '../../actions';
import ProductMock from '../../__mocks__/ProductMock';

describe('Actions', () => {
  test('addToCart Action', () => {
    const payload = ProductMock;
    const expected = {
      type: 'ADD_TO_CART',
      payload,
    };
    expect(actions.addToCart(payload)).toEqual(expected);
  });
  test('removeFromCart Action', () => {
    const payload = ProductMock;
    const expected = {
      type: 'REMOVE_FROM_CART',
      payload,
    };
    expect(actions.removeFromCart(payload)).toEqual(expected);
  });
});

Willy David Da Conceicao Lozada

student•

es el mismo procedimiento para probar actions asíncronos por ejemplo usando redux thunk?

Camilo Alexander Velandia Velandia

student•

test('removefromcart Action', () =&gt; {
    const payload = ProductMock;
    const expected = {
      type: 'REMOVE_FROM_CART',
      payload,
    };
    expect(actions.removeFromCart(payload)).toEqual(expected);
  });```

Pedro Muñoz Becerra

student•

Aquí mi solución:

test('removeFromCart Action', () => {
    const payload = ProductMock;
    const expected = {
      type: 'REMOVE_FROM_CART',
      payload,
    };
    expect(actions.removeFromCart(payload)).toEqual(expected);
  });

Sandra Mishale Niño Arbelaez

student•

¿Cuál es la diferencia de utilizar test o it dentro del describe?

Luis Lira

student•

¡Hola!

Tengo entendido que no hay ninguna diferencia, it es un alias de test según la documentación de Jest :D

Sandra Mishale Niño Arbelaez

student•

Gracias por la aclaración!

Diego Grueso

student•

Reto

import actions from '../../actions';
import productMock from '../../__mocks__/productMock';

describe('Actions', () => {
  const payload = productMock;
  test('AddToCart Action', () => {
    const expected = {
      type: 'ADD_TO_CART',
      payload,
    };
    expect(actions.addToCart(payload)).toEqual(expected);
  });
  test('RemoveFromCart Action', () => {
    const expected = {
      type: 'REMOVE_FROM_CART',
      payload,
    };
    expect(actions.removeFromCart(payload)).toEqual(expected);
  });
});

Juan Camilo Lentino Villalba

student•

para el reto

describe('Actions', ()=> {
    ....

    test('removeToCart action', ()=> {
        const payload = ProductMock
        const expected = {
            type: 'REMOVE_FROM_CART',
            payload
        }

        expect(actions.removeFromCart(payload)).toEqual(expected)
    })
})

David Alejandro Quiñonez

student•

Una forma de probar escenarios que son similares es con test.each. Quedaria algo asi:

describe('Actions', () => {
  const payload = ProductMock;

  const actionsToTest = [
    ['ADD_TO_CART', actions.addToCart, payload],
    ['REMOVE_FROM_CART', actions.removeFromCart, payload],
  ];

  test.each(actionsToTest)(
    'should call %p correctly',
    (actionType, actionToCall, expectedPayload) => {
      const expected = {
        type: actionType,
        payload: expectedPayload,
      };

      expect(actionToCall(payload)).toEqual(expected);
    }
  );
});

David Torres Guevara

student•

Solucion al reto:

test('removeFromCart', () => {
    const payload = ProductMock;
    const expected = {
      type: 'REMOVE_FROM_CART',
      payload,
    };
    expect(actions.removeFromCart(payload)).toEqual(expected);

Juan Ignacio Marderwald

student•

Un curso de inglés urgente para el profesor Oscar!!

Luis Berenguer

student•

  test("removeFromCart Action", ()=> {
    const payload = ProductMock
    const expected = {
      type: "REMOVE_FROM_CART",
      payload,
    }
    expect(actions.removeFromCart(payload).toEqual(expected))
  })

Amgonzalez@altec.com.ar

student•

// actions.test.js import actions from '../../actions'; import ProductMock from '../../mocks/ProductMock';

describe('Actions', () => { test('addToCart Action', () => { const payload = ProductMock; const expected = { type: 'ADD_TO_CART', payload, }; expect(actions.addToCart(payload)).toEqual(expected); }); // reto agregar la elimacion del producto test('RemoveFromCart Action', () => { const payload = ProductMock; const expected = { type: 'REMOVE_FROM_CART', payload }; expect(actions.removeFromCart(payload)).toEqual(expected) }) });

Elioenai Garcia

student•

Reto:

Eddie Guadalupe Elorza Ruiz

student•

RETO

import actions from '../../actions';
import ProductMock from '../../__mocks__/ProductMock';


describe('actions', () => {
    test ('addToCart Action', () => {
        const payload = ProductMock;
        const expected = {
            type: 'ADD_TO_CART',
            payload
        }
        expect(actions.addToCart(payload)).toEqual(expected);
    });  
    test ('removeFromCart Action', () => {
        const payload = ProductMock;
        const expected = {
            type: 'REMOVE_FROM_CART',
            payload
        }
        expect(actions.removeFromCart(payload)).toEqual(expected);
    });  

});

Yaiser Avila Rodriguez

student•

Reto: Remove from cart jest-React->

test('Remove from cart', () => { const expected = { type: 'REMOVE_FROM_CART', payload: ProductMock, }; expect(actions.removeFromCart(ProductMock)).toEqual(expected); });

Andrés Felipe Eslava Zuluaga

student•

reTO:

import actions from '../../actions';
import ProductMock from '../../__mocks__/ProductMock';

describe('Actions', () => {
  test('PRobar addToCart Action', () => {
    const payload = ProductMock;
    const expected = {
      type: 'ADD_TO_CART',
      payload,
    };
    expect(actions.addToCart(payload)).toEqual(expected);
  });

  test('PRobar removeFromCart Action', () => {
    const payload = ProductMock;
    const expected = {
      type: 'REMOVE_FROM_CART',
      payload,
    };
    expect(actions.removeFromCart(payload)).toEqual(expected);
  });
  
});

Carlos Morán

student•

Mi código para probar removeFromCart

test('removeFromCart action', () => {
    const payload = ProductMock;
    const expected = {
      type: 'REMOVE_FROM_CART',
      payload
    };
    expect(actions.removeFromCart(payload)).toEqual(expected);
  });

import actions from '../../actions/';
import ProductMock from '../../__mocks__/ProductMock';

describe('Actions', () => {
  const payload = ProductMock;
  test('addToCart Action', () => {
    const expected = {
      type: 'ADD_TO_CART',
      payload,
    };
    expect(actions.addToCart(payload)).toEqual(expected);
  });
  test('removeFromCart', () => {
    const expected = {
      type: 'REMOVE_FROM_CART',
      payload,
    };
    expect(actions.removeFromCart(payload)).toEqual(expected);
  });
});

import actions from '../../actions';
import ProductMock from '../../__mocks__/ProductMock';

describe('Actions', () => {
  test('addToCart Action', () => {
    const payload = ProductMock;
    const expected = {
      type: 'ADD_TO_CART',
      payload,
    };
    expect(actions.addToCart(payload)).toEqual(expected);
  });
  test('removeFromCart Action', () => {
    const payload = ProductMock;
    const expected = {
      type: 'REMOVE_FROM_CART',
      payload,
    };
    expect(actions.removeFromCart(payload)).toEqual(expected);
  });
});

test('removefromcart Action', () =&gt; {
    const payload = ProductMock;
    const expected = {
      type: 'REMOVE_FROM_CART',
      payload,
    };
    expect(actions.removeFromCart(payload)).toEqual(expected);
  });```

test('removeFromCart Action', () => {
    const payload = ProductMock;
    const expected = {
      type: 'REMOVE_FROM_CART',
      payload,
    };
    expect(actions.removeFromCart(payload)).toEqual(expected);
  });

import actions from '../../actions';
import productMock from '../../__mocks__/productMock';

describe('Actions', () => {
  const payload = productMock;
  test('AddToCart Action', () => {
    const expected = {
      type: 'ADD_TO_CART',
      payload,
    };
    expect(actions.addToCart(payload)).toEqual(expected);
  });
  test('RemoveFromCart Action', () => {
    const expected = {
      type: 'REMOVE_FROM_CART',
      payload,
    };
    expect(actions.removeFromCart(payload)).toEqual(expected);
  });
});

describe('Actions', ()=> {
    ....

    test('removeToCart action', ()=> {
        const payload = ProductMock
        const expected = {
            type: 'REMOVE_FROM_CART',
            payload
        }

        expect(actions.removeFromCart(payload)).toEqual(expected)
    })
})

describe('Actions', () => {
  const payload = ProductMock;

  const actionsToTest = [
    ['ADD_TO_CART', actions.addToCart, payload],
    ['REMOVE_FROM_CART', actions.removeFromCart, payload],
  ];

  test.each(actionsToTest)(
    'should call %p correctly',
    (actionType, actionToCall, expectedPayload) => {
      const expected = {
        type: actionType,
        payload: expectedPayload,
      };

      expect(actionToCall(payload)).toEqual(expected);
    }
  );
});

test('removeFromCart', () => {
    const payload = ProductMock;
    const expected = {
      type: 'REMOVE_FROM_CART',
      payload,
    };
    expect(actions.removeFromCart(payload)).toEqual(expected);

  test("removeFromCart Action", ()=> {
    const payload = ProductMock
    const expected = {
      type: "REMOVE_FROM_CART",
      payload,
    }
    expect(actions.removeFromCart(payload).toEqual(expected))
  })

import actions from '../../actions';
import ProductMock from '../../__mocks__/ProductMock';


describe('actions', () => {
    test ('addToCart Action', () => {
        const payload = ProductMock;
        const expected = {
            type: 'ADD_TO_CART',
            payload
        }
        expect(actions.addToCart(payload)).toEqual(expected);
    });  
    test ('removeFromCart Action', () => {
        const payload = ProductMock;
        const expected = {
            type: 'REMOVE_FROM_CART',
            payload
        }
        expect(actions.removeFromCart(payload)).toEqual(expected);
    });  

});

import actions from '../../actions';
import ProductMock from '../../__mocks__/ProductMock';

describe('Actions', () => {
  test('PRobar addToCart Action', () => {
    const payload = ProductMock;
    const expected = {
      type: 'ADD_TO_CART',
      payload,
    };
    expect(actions.addToCart(payload)).toEqual(expected);
  });

  test('PRobar removeFromCart Action', () => {
    const payload = ProductMock;
    const expected = {
      type: 'REMOVE_FROM_CART',
      payload,
    };
    expect(actions.removeFromCart(payload)).toEqual(expected);
  });
  
});

test('removeFromCart action', () => {
    const payload = ProductMock;
    const expected = {
      type: 'REMOVE_FROM_CART',
      payload
    };
    expect(actions.removeFromCart(payload)).toEqual(expected);
  });

Probar Actions

Bienvenida

Pruebas unitarias con Jest en React

¿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

Pruebas con Jest: watch, coverage y suites

Usando Jest con React

Configuración de Jest y Enzyme en Platzi Store

Mocks para estilos y Redux en Jest

Pruebas de componentes Redux con mocks

Pruebas de snapshot en componentes React

Probar Actions

Pruebas unitarias para reducers en React

Cómo probar fetch con jest-fetch-mock

Deploy y CI con Travis

Integración continua con Travis CI y GitHub Pages

Travis CI desplegando a producción automáticamente

Recapitulación y cierre