[typescript] 타입스크립트와 Jest를 활용하여 Redux 액션 및 리듀서를 테스트하는 방법

11 Dec 2023

typescript

Redux는 React 애플리케이션의 상태를 관리하기 위한 효과적인 도구입니다. 이를 위해 Redux 액션과 리듀서를 테스트하는 것은 매우 중요합니다. 또한, 타입스크립트를 사용하여 Redux를 작업할 때, 코드에 대한 안정성과 신뢰성을 높일 수 있습니다. Jest는 테스트 코드 작성을 도와주는 강력한 도구이며, Redux 액션과 리듀서를 테스트하는 데 사용될 수 있습니다.

Redux 액션 테스트

먼저, Redux 액션을 테스트해 보겠습니다. Redux 액션은 상태 변화를 일으키는 객체입니다. 예를 들어, 사용자가 로그인할 때 발생하는 “로그인” 액션이 있다고 가정해 봅시다.

// src/actions/userAction.ts

export const login = (username: string, password: string) => {
  return {
    type: 'LOGIN',
    payload: { username, password }
  };
};

이제 Jest를 사용하여 이 액션 함수를 테스트할 수 있습니다.

// src/actions/userAction.test.ts

import { login } from './userAction';

describe('User Actions', () => {
  it('should create an action to log in', () => {
    const username = 'user1';
    const password = 'password123';
    const expectedAction = {
      type: 'LOGIN',
      payload: { username, password }
    };
    expect(login(username, password)).toEqual(expectedAction);
  });
});

위의 코드는 “로그인” 액션을 테스트하는 예시입니다.

Redux 리듀서 테스트

이제 Redux 리듀서를 테스트하는 방법을 알아보겠습니다. 리듀서는 이전 상태와 액션을 받아 새로운 상태를 반환하는 함수입니다.

// src/reducers/userReducer.ts

interface UserState {
  username: string;
  isLoggedIn: boolean;
}

const initialState: UserState = {
  username: '',
  isLoggedIn: false
};

const userReducer = (state = initialState, action: any): UserState => {
  switch (action.type) {
    case 'LOGIN':
      return {
        ...state,
        username: action.payload.username,
        isLoggedIn: true
      };
    default:
      return state;
  }
};

export default userReducer;

이제 Jest를 사용하여 리듀서 함수를 테스트할 수 있습니다.

// src/reducers/userReducer.test.ts

import userReducer from './userReducer';

describe('User Reducer', () => {
  it('should return the initial state', () => {
    expect(userReducer(undefined, {})).toEqual({
      username: '',
      isLoggedIn: false
    });
  });

  it('should handle LOGIN action', () => {
    const username = 'user1';
    const action = {
      type: 'LOGIN',
      payload: { username }
    };
    expect(userReducer(undefined, action)).toEqual({
      username: 'user1',
      isLoggedIn: true
    });
  });
});

위의 코드는 “로그인” 액션을 처리하는 리듀서를 테스트하는 예시입니다.

마무리

Redux 액션 및 리듀서를 타입스크립트와 Jest를 활용하여 테스트하는 방법을 살펴보았습니다. 테스트 코드 작성은 애플리케이션의 안정성을 높이고 버그를 줄이는 데 큰 도움이 됩니다. 이를 통해 코드 변경에 따른 예상치 못한 부작용을 방지하고, 안전하게 리팩토링할 수 있습니다.