How to test with jest delete action and redux case

andorando 0
Viewed 31

I am writing test for my simple React + Redux application and I was wondering how exactly can I test my reducer.

I have an action that allows the user to remove 1 object from the global state on click and I'm trying to test it.

This is my reducer with the type:

const PeopleReducer = (state:any = initialPeopleState, action:any):object => {
  switch(action.type){
    case DELETE_PERSON:
      return  {...state, people:state.people?.filter((a:any)=>a.id !== action.id)}
    default:
      return state;
  }
}

Here is my action:

export const deletePerson = (id:number) => {
  return {
    type: DELETE_PERSON,
    id
  }
}

I'm calling the action with this dispatch: const deleteCard=()=>dispatch(deletePerson(id));

I am not sure how to test this exactly but this is my current attempt:

  it('should test DELETE Person function', () => {
   const deletePerson = {
       type: DELETE_PERSON,
       id:1
     }
  
     expect(reducer({}, deletePerson)).toEqual({people:mockData.people});
   });

My mocked data is based on the placeholder json API, the users endpoint:

export const mockData = {
  people:  [{
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  }]
}

How can I test my deletePerson action and my redux delete case?

redux reactjs typescript
1 Answers

See Unit Testing Individual Functions

Reducers are pure functions that return the new state after applying the action to the previous state. In the majority of cases, the reducer is an implementation detail that does not need explicit tests. However, if your reducer contains particularly complex logic that you would like the confidence of having unit tests for, reducers can be easily tested.

Because reducers are pure functions, so testing them should be straightforward. Call the reducer with a specific input state and action, and assert that the result state matches expectations.

So your test approach is correct, but you should make the input and output for the reducer function correctly. A working example:

const initialPeopleState = {};

const DELETE_PERSON = 'DELETE_PERSON';
const PeopleReducer = (state: any = initialPeopleState, action: any): object => {
  switch (action.type) {
    case DELETE_PERSON:
      return { ...state, people: state.people?.filter((a: any) => a.id !== action.id) };
    default:
      return state;
  }
};

export const deletePerson = (id: number) => {
  return {
    type: DELETE_PERSON,
    id,
  };
};

describe('73694887', () => {
  test('should pass', () => {
    const mockData = {
      people: [
        {
          id: 1,
          name: 'Leanne Graham',
          username: 'Bret',
          email: 'Sincere@april.biz',
          address: {
            street: 'Kulas Light',
            suite: 'Apt. 556',
            city: 'Gwenborough',
            zipcode: '92998-3874',
            geo: {
              lat: '-37.3159',
              lng: '81.1496',
            },
          },
          phone: '1-770-736-8031 x56442',
          website: 'hildegard.org',
          company: {
            name: 'Romaguera-Crona',
            catchPhrase: 'Multi-layered client-server neural-net',
            bs: 'harness real-time e-markets',
          },
        },
      ],
    };

    expect(PeopleReducer(mockData, deletePerson(1))).toEqual({ people: [] });
  });
});
slideshowp20
Related