Probar Actions

Curso de Unit Testing con Jest en React

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

No tienes acceso a esta clase

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

Crear cuenta

Si ya tienes una cuenta,

Iniciar sesión

Recursos

Aportes 28

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Juan Carlos Ustarroz

hace 2 años

con esta extencion para vscode puede hacer los test mas rapidos
https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest

Julian Carelli

hace 2 años

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

Reto completado 😄

silvana murgo

hace 2 años

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 😄

Seba Cardoso

hace 3 años

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

JuanDanielRR

hace 2 años

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

Camilo Alexander Velandia Velandia

hace 2 años

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

Pedro Muñoz Becerra

hace 2 años

Aquí mi solución:

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

goide

hace un año

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

Luis Berenguer

hace 4 meses

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

GTBche

hace 4 meses

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

hace 5 meses

Reto:

Eddie Guadalupe Elorza Ruiz

hace 6 meses

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

hace 7 meses

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

hace 8 meses

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

hace 10 meses

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

Santiago Lopera Naranjo

hace un año

Como solo necesita el id, solo le paso este: 😄

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

Ramón Ruiz

hace un año

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

Mauricio Rodriguez Avila

hace 2 años

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

Victor Martin Ortiz Palacio

hace 2 años

Challenge:

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

guissmejia

hace 2 años

Challenge:

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

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

//Remove From Cart
describe('Actions', () => {
  test('removeFromCart Action', () => {
    const payload = ProductMock;
    const expected = {
      type: 'REMOVE_FROM_CART',
      payload,
    };
    expect(actions.removeFromCart(payload)).toEqual(expected);
  });
});```

Roberto Carlos Zapata Reyes

hace 2 años

Sandra Menendez Alonso

hace 2 años

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

  });

Julian Jaramillo

hace 2 años

it('Test de los actions eliminar', () => {
  const payload = ProductMock;
  const expected = {
    type: 'REMOVE_FROM_CART',
    payload,
  };
  expect(actions.removeFromCart(payload)).toEqual(expected);
});

Manuel Rivera

hace 2 años

Captura de pantalla de 2020-02-29 18-43-52.png

Vanessa Pacheco

hace 2 años

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

Jonathan Gonzalez Botero

hace un año

Mi solución fue similar a la de muchos pero con la diferencia que dejé la variable payload en mi scope global del describe y la usé en ambos test, así:

describe('Testing actions', () => {
  let payload = ProductMock;
  test('Add to Cart Action', () => {
    let expected = {
      type: 'ADD_TO_CART',
      payload
    }
    expect(actions.addToCart(payload)).toEqual(expected);
  });

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

Carlos Rosado

hace un año

Mi solución

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

lcabrales

hace un año