Учебники

Redux — Тестирование

Декабрь 18, 2018

Тестировать код Redux легко, так как мы в основном пишем функции, и большинство из них чистые. Таким образом, мы можем проверить это, даже не издеваясь над ними. Здесь мы используем JEST в качестве движка тестирования. Он работает в среде узла и не имеет доступа к DOM.

Мы можем установить JEST с кодом, приведенным ниже — 

npm install --save-dev jest

С Babel вам необходимо установить Babel-Jest следующим образом: 

npm install --save-dev babel-jest

И настройте его для использования функций babel-preset-env в файле .babelrc следующим образом: 

{ 
   "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 
}

Наконец, запустите npm test или 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 .

45
Share: