Redux-테스트

Redux 코드 테스트는 우리가 대부분 함수를 작성하기 때문에 쉽고 대부분 순수합니다. 그래서 우리는 그들을 조롱하지 않고도 테스트 할 수 있습니다. 여기서는 JEST를 테스트 엔진으로 사용하고 있습니다. 노드 환경에서 작동하며 DOM에 액세스하지 않습니다.

아래 코드로 JEST를 설치할 수 있습니다.

npm install --save-dev jest

바벨을 사용하면 babel-jest 다음과 같이-

npm install --save-dev babel-jest

그리고 다음과 같이 .babelrc 파일에서 babel-preset-env 기능을 사용하도록 구성하십시오.

{ 
   "presets": ["@babel/preset-env"] 
}
And add the following script in your package.json:
{ 
   //Some other code 
   "scripts": {
      //code
      "test": "jest", 
      "test:watch": "npm test -- --watch" 
   }, 
   //code 
}

드디어, run npm test or npm run test. 액션 생성자와 리듀서를위한 테스트 케이스를 어떻게 작성할 수 있는지 확인해 보겠습니다.

액션 크리에이터를위한 테스트 케이스

아래와 같이 액션 크리에이터가 있다고 가정 해 보겠습니다.

export function itemsRequestSuccess(bool) {
   return {
      type: ITEMS_REQUEST_SUCCESS,
      isLoading: bool,
   }
}

이 액션 생성자는 아래와 같이 테스트 할 수 있습니다.

import * as action from '../actions/actions';
import * as types from '../../constants/ActionTypes';

describe('actions', () => {
   it('should create an action to check if item is loading', () => { 
      const isLoading = true, 
      const expectedAction = { 
         type: types.ITEMS_REQUEST_SUCCESS, isLoading 
      } 
      expect(actions.itemsRequestSuccess(isLoading)).toEqual(expectedAction) 
   })
})

감속기에 대한 테스트 사례

우리는 감속기가 액션이 적용될 때 새로운 상태를 반환해야한다는 것을 배웠습니다. 따라서 감속기는이 동작에 대해 테스트됩니다.

아래에 주어진 감속기를 고려하십시오-

const initialState = {
   isLoading: false
};
const reducer = (state = initialState, action) => {
   switch (action.type) {
      case 'ITEMS_REQUEST':
         return Object.assign({}, state, {
            isLoading: action.payload.isLoading
         })
      default:
         return state;
   }
}
export default reducer;

위의 감속기를 테스트하려면 감속기에 상태와 동작을 전달하고 아래와 같이 새로운 상태를 반환해야합니다.

import reducer from '../../reducer/reducer' 
import * as types from '../../constants/ActionTypes'

describe('reducer initial state', () => {
   it('should return the initial state', () => {
      expect(reducer(undefined, {})).toEqual([
         {
            isLoading: false,
         }
      ])
   })
   it('should handle ITEMS_REQUEST', () => {
      expect(
         reducer(
            {
               isLoading: false,
            },
            {
               type: types.ITEMS_REQUEST,
               payload: { isLoading: true }
            }
         )
      ).toEqual({
         isLoading: true
      })
   })
})

테스트 케이스 작성에 익숙하지 않다면 JEST 기본 사항을 확인할 수 있습니다 .