Probar Reducers

Bueno el curso, pero hace falta hacerlo con Hooks! No todo es Redux. 😃

un ejemplo simple de como probrar REMOVE_FROM_CART action

test('REMOVE_FROM_CART', () => {
    const initialState = { cart: [ProductMock] };
    const action = { type: 'REMOVE_FROM_CART', payload: ProductMock };
    const expected = { cart: [] };

    expect(reducer(initialState, action)).toEqual(expected);
  });

esta prueba es importante para una aplicacion que estoy desarrollando Gracias Oscar, Gracias Platzi

una recomendación es crear los mocks de datos en tipo de archivo json, con eso garantizamos que al momento de revisar la cobertura va ignorar esos archivos

Agradezco haber entendido Redux, antes de esta clase.

No estoy seguro de que sea necesario probar los reducers. Los que desarrollan Redux ya se encargaran de eso.

En todo caso sería probar que las actions que tenemos sean las correctas.

¿Qué opinan?

Mi código del REMOVE_FROM_CART

test('REMOVE_FROM_CART', () => {
    const initialState = {
      cart: [
        ProductMock,
      ],
    };
    const payload = ProductMock;
    const action = {
      type: 'REMOVE_FROM_CART',
      payload,
    };
    const expected = {
      cart: [],
    };
    expect(reducer(initialState, action)).toEqual(expected);
  });

Gracias por el curso sos d10s

Así quedó mi prueba de ‘REMOVE_FROM_CART’:

  test('REMOVE_FROM_CART', () => {
    const payload = ProductMock;
    const initialState = {
      cart: [ProductMock],
    };
    const action = {
      type: 'REMOVE_FROM_CART',
      payload,
    };
    const expected = {
      cart: [],
    };
    expect(reducer(initialState, action)).toEqual(expected);
  });```

Ah estado algo pesado el curso, pero ahí vamos 😄

yo lo hice validando también en el initialState el arreglo de productos

test('Retornar initialState', ()=> {
        const initialState = { cart: [], products: [] }
        expect(reducers(initialState, '')).toEqual(initialState)
    })

test('ADD_TO_CART', ()=> {
        const initialState = { cart: [], products: [] }
        const payload = ProductMock
        const action = { type: 'ADD_TO_CART', payload }

        const expected = {
            cart:[ProductMock],
            products: []
        }

        expect(reducers(initialState, action)).toEqual(expected)
    })

adicionalmente añadí el REMOVE_FROM_CART

test('REMOVE_FROM_CART', ()=> {
        const initialState = { cart: [ProductMock], products: [] }
        const payload = ProductMock
        const action = { type: 'REMOVE_FROM_CART', payload }

        const expected = {
            cart: [],
            products: []
        }

        expect(reducers(initialState, action)).toEqual(expected)
    })

el código completo quedaría así
src/tests/reducers/reducers.test.js:

import reducers from '../../reducers'
import ProductMock from '../../__mocks__/ProductMock'

describe('Reducers', ()=> {
    
    test('Retornar initialState', ()=> {
        const initialState = { cart: [], products: [] }
        expect(reducers(initialState, '')).toEqual(initialState)
    })

    test('ADD_TO_CART', ()=> {
        const initialState = { cart: [], products: [] }
        const payload = ProductMock
        const action = { type: 'ADD_TO_CART', payload }

        const expected = {
            cart:[ProductMock],
            products: []
        }

        expect(reducers(initialState, action)).toEqual(expected)
    })

    test('REMOVE_FROM_CART', ()=> {
        const initialState = { cart: [ProductMock], products: [] }
        const payload = ProductMock
        const action = { type: 'REMOVE_FROM_CART', payload }

        const expected = {
            cart: [],
            products: []
        }

        expect(reducers(initialState, action)).toEqual(expected)
    })
})

El código de la clase con ambas acciones:

import reducer from '../../reducers';
import ProductMock from '../../__mocks__/ProductMock';

describe('Reducers', () => {
  test('Retornar Initial State', () => {
    expect(reducer({},'')).toEqual({});
  });

  test('ADD_TO_CART', () => {
    const initialState = {
      cart: [],
    };
    const action = {
      type: 'ADD_TO_CART',
      payload: ProviderMock,
    };
    const expected = {
      cart: [ ProductMock ],
    };
    expect(reducer(initialState, action)).toEqual(expected);
  });

  test('REMOVE_FROM_CART', () => {
    const initialState = {
      cart: []
    };
    const action = {
      type: 'REMOVE_FROM_CART',
      payload: ProductMock,
    };
    const expected = {
      cart: [],
    }
  });
});

it('Prueba de reducers remove', () => {
  const initialState = {
    cart: [],
  };
  const payload = ProductMock;
  const action = {
    type: 'REMOVE_FROM_CART',
    payload,
  };
  const expected = {
    cart: [],
  };
  expect(reducers(initialState, action)).toEqual(expected);
});```

Acá mi implementación para REMOVE_FROM_CART como ejercicio complementario

  test('Remove from cart', () => {
    let payload = ProductMock;
    let initialState = {
      cart: []
    };
    let action = {
      type: 'REMOVE_FROM_CART',
      payload
    };
    let expected = {
      cart: []
    }
    expect(reducer(initialState, action)).toEqual(expected);
  });

Remover un Producto

test('REMOVE_TO_CART', () => {
        const initialState = {
            cart: [ProductMock]
        };
        const payload = ProductMock;
        const action = {
            type: 'REMOVE_FROM_CART',
            payload
        };
        const expected = {
            cart: [
            ]
        };
        expect(reducers(initialState, action)).toEqual(expected)
    })