이제는 개발 프로세스에서 테스트를 소홀히 할 수 없는 시대입니다. 테스트가 잘 구축되어 있는 애플리케이션은 버그를 사전에 잡아내고 유지보수 비용을 줄이는 데 도움이 됩니다. 이번 글에서는 Redux Toolkit을 활용하여 자바스크립트 프론트엔드 애플리케이션을 테스트하는 전략을 알아보도록 하겠습니다.

1. 테스트 환경 설정

Redux Toolkit은 Jest 및 React Testing Library와 같은 테스트 도구와 원활하게 통합되어 있습니다. 따라서, 테스트 환경을 구성하기 위해 다음 패키지를 설치해야 합니다.

npm install --save-dev @reduxjs/toolkit jest @testing-library/react

2. 테스트 작성

Redux Toolkit은 리덕스 코드를 더욱 효율적으로 작성할 수 있도록 해주는 많은 유틸리티 함수와 흥미로운 기능을 제공합니다. 따라서, 테스트 코드에서도 이러한 장점을 활용할 수 있습니다.

Redux Toolkit을 사용하는 애플리케이션의 상태를 테스트하기 위해서는 render 함수를 사용하여 컴포넌트를 렌더링한 후, Redux Provider로 감싸야 합니다.

// MyComponent.test.js

import React from 'react';
import { render } from '@testing-library/react';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from '../src/reducers';
import MyComponent from '../src/components/MyComponent';

describe('MyComponent', () => {
  let store;

  beforeEach(() => {
    store = configureStore({
      reducer: rootReducer,
    });
  });

  test('renders without errors', () => {
    render(
      <Provider store={store}>
        <MyComponent />
      </Provider>
    );
  });
});

위 코드에서 configureStore 함수는 Redux Toolkit이 제공하는 기능 중 하나로, rootReducer를 사용하여 Redux store를 구성합니다. 그리고 render 함수로 <MyComponent />를 렌더링한 후, Redux Provider로 감싸서 Redux store를 전달합니다.

이제 Jest 명령을 실행하면 테스트가 실행되고, MyComponent가 오류없이 렌더링되는지 확인할 수 있습니다.

3. 액션 테스트

Redux Toolkit은 액션을 생성하는 데에도 유용한 기능을 제공합니다. createAction 함수를 사용하면 간단하게 액션을 생성할 수 있고, expect 함수로 특정 액션이 디스패치되었는지를 검증할 수 있습니다.

// mySlice.test.js

import mySlice, { fetchMyData } from '../src/slices/mySlice';

describe('mySlice', () => {
  test('fetchMyData action should be dispatched', () => {
    const dispatch = jest.fn();
    const action = fetchMyData();
    mySlice.caseReducers.fetchMyData({}, { payload: { data: 'test' } });
  
    action(dispatch);
  
    expect(dispatch).toHaveBeenCalledWith(action);
  });
});

위 코드에서 fetchMyData 액션은 Redux Toolkit의 createAction 함수를 사용하여 생성되었습니다. fetchMyData 액션을 디스패치하면서 dispatch 함수가 호출되는지를 검증하였습니다.

4. 비동기 작업 테스트

Redux Toolkit은 비동기 작업을 처리하기 위한 createAsyncThunk 함수를 제공합니다. 이를 활용하여 비동기 작업을 테스트할 수 있습니다. 예를 들어, API 호출을 시뮬레이션하여 데이터를 가져오는 작업을 테스트해보겠습니다.

// mySlice.test.js

import mySlice, { fetchMyData } from '../src/slices/mySlice';

jest.mock('../src/api/myApi');

describe('mySlice', () => {
  test('fetchMyData should fetch data', async () => {
    const dispatch = jest.fn();
    await fetchMyData()(dispatch);
  
    expect(dispatch).toHaveBeenCalledWith(mySlice.actions.setMyData({ data: 'test' }));
  });
});

위 코드에서 fetchMyData 액션을 호출하면, mySlice.actions.setMyData 액션이 디스패치되는지를 검증하였습니다. await를 사용하여 비동기 작업이 완료될 때까지 기다린 후에 검증합니다.

결론

Redux Toolkit을 활용하여 자바스크립트 프론트엔드 애플리케이션을 테스트하는 전략을 살펴보았습니다. Redux Toolkit은 테스트를 더욱 간편하게 작성할 수 있도록 지원하며, 디버깅과 유지보수를 효율적으로 처리할 수 있게 도와줍니다. 효율적인 테스트를 통해 안정적인 애플리케이션을 개발할 수 있도록 노력해보세요.

#javascript #redux #testing