React Testing: Reducer testing (with Redux)

---

🧐 Redux는 테스트하기 쉽다?

리액트로 프로젝트를 진행하면서,
전역상태관리를 위해 리덕스를 사용하는 이유중 하나는 테스트하기 쉽다라는 것이다.
테스트코드를 직접 작성해보기 전에는 어떤 점에서 쉽다는 건지 잘 이해가 되지 않았지만,
테스트코드를 작성하면서 테스팅이 용이하다고 느낀점은 아래의 2가지였다.

1. 하나의 Store로 관리하기 때문에 리덕스로 관리하는 components들을 테스팅하기 쉽다.
2. 리듀서는 순수함수로 구성되고, 라이브러리들이 잘 관리되어있어서 리듀서 테스팅, 미들웨어를 적용한 테스팅이 쉽다.

이번 글에서는 Redux의 Reducer들을 테스트한 내용을 기록해보도록 하겠다.

📚 Reducer testing

리듀서 테스팅은 state와 action을 테스트 케이스에 따라 넘겨주고, 그에 맞게 상태가 잘 변경되는지에 대해 테스트하는 것이 주를 이룬다.

테스트 코드

아래는 TodoList에 리스트를 추가, 완료, 제거하는 리듀서와 테스트코드다.

// todos.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { nanoid } from 'nanoid';
import { Todo } from '../types/Todo';

const todosSlice = createSlice({
  name: 'todos',
  initialState: [] as Todo[],
  reducers: {
    add: {
      prepare: (text: string) => ({
        payload: {
          id: nanoid(),
          done: false,
          text,
        },
      }),
      reducer(state, action: PayloadAction<Todo>) {
        state.push(action.payload);
      },
    },
    toggle(state, action: PayloadAction<string>) {
      const todo = state.find((todo) => todo.id === action.payload);
      if (!todo) return;
      todo.done = !todo.done;
    },
    remove(state, action: PayloadAction<string>) {
      return state.filter((todo) => todo.id !== action.payload);
    },
  },
});

export const todosActions = todosSlice.actions;
export default todosSlice.reducer;

// todos.test.ts

import todos, { todosActions } from '../../src/_reducer/todos';

describe('todos reducer', () => {
  it('has initial state', () => {
    expect(todos(undefined, { type: '@@INIT' })).toEqual([]);
  });

  it('handles add', () => {
    const state = todos([], todosActions.add('컴포넌트 만들기'));
    expect(state[0].text).toEqual('컴포넌트 만들기');
  });

  it('handles toggle', () => {
    const sampleState = [
      { id: '1', done: false, text: '컴포넌트 만들기' },
      { id: '2', done: false, text: '테스트 코드 작성하기' },
    ];
    let state = todos(sampleState, todosActions.toggle('1'));

    expect(state).toEqual([
      { id: '1', done: true, text: '컴포넌트 만들기' },
      { id: '2', done: false, text: '테스트 코드 작성하기' },
    ]);
    state = todos(state, todosActions.toggle('1'));
    expect(state).toEqual([
      { id: '1', done: false, text: '컴포넌트 만들기' },
      { id: '2', done: false, text: '테스트 코드 작성하기' },
    ]);
  });

  it('handles remove', () => {
    let state = [
      { id: '1', done: false, text: '컴포넌트 만들기' },
      { id: '2', done: false, text: '테스트 코드 작성하기' },
    ];
    state = todos(state, todosActions.remove('2'));
    expect(state).toEqual([{ id: '1', done: false, text: '컴포넌트 만들기' }]);
    state = todos(state, todosActions.remove('1'));
    expect(state).toEqual([]);
  });
});

리듀서는 Reudx-toolkit을 사용하여 하나의 slice로 구성하였고
이를 테스트코드에 import 하여 리듀서 테스트 코드를 작성하였다.

Redux-mock-store

이렇게 리덕스로 전역상태를 관리했을때, 전역상태와 연관된 components,hooks 등을 테스트하기 위해서는
실제로 작성한 store를 사용하는 방법도 있으나, redux-mock-store 라이브러리를 사용하면 미들웨어를 포함한 다양한 테스트코드를 간편하게 작성할 수 있다.

// prepareMockReduxWrapper.tsx
import React from 'react';
import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
import { RootState } from '../_reducer';

function prepareMockReduxWrapper(initialState?: RootState) {
  const store = configureMockStore()(initialState);
  const wrapper = ({ children }: { children: React.ReactNode }) => {
    return <Provider store={store as any}>{children}</Provider>;
  };
  return [wrapper, store] as const;
}

export default prepareMockReduxWrapper;

redux-mock-store의 configureMockStore를 사용하면 미들웨어 설정을 포함한 리듀서와 스토어를 간편하게 연결하여 테스트할 수 있다.

---

🙏 참고

• redux-mock-store
• 리덕스 어떻게 써야 절썼다고 소문이 날까
• Jest를 이용한 Reducer 테스트