redux - 如何对 reduxsauce 进行单元测试？

Question

我正在使用 redux 存储库的 reduxsauce 库，并且我想对其中的单个 redux 存储进行单元测试。
还原文件:

import { createReducer, createActions } from 'reduxsauce'
import Immutable from 'seamless-immutable'

/* ------------- Types and Action Creators ------------- */

const { Types, Creators } = createActions({
  getLanguage: [],
  setLanguage: ['language']
})

export const LanguageTypes = Types
export default Creators

/* ------------- Initial State ------------- */

export const INITIAL_STATE = Immutable({
  language: "en"
})

/* ------------- Reducers ------------- */


export const getLanguage = (state: Object, {}: Object) => {
    return state.merge({})
}

export const setLanguage = (state: Object, { language }: Object) => {
    return state.merge({ language })
}

/* ------------- Hookup Reducers To Types ------------- */

export const reducer = createReducer(INITIAL_STATE, {
  [Types.SET_LANGUAGE]: setLanguage,
  [Types.GET_LANGUAGE]: getLanguage,
})

考试:

import * as actions from '../../../redux/LanguageRedux'
import * as types from '../../../redux/LanguageRedux'

describe('Language redux ', () => {
  it('should have default language ', () => {
    expect(actions.INITIAL_STATE.language).toEqual("en")
  }),
  it('should be able to set the language', () => {
    // I know the calls below are not tests but still its relevant with the error
    actions.getLanguage()
    actions.setLanguage()
  })
})

错误:

● Language redux  › should be able to set the language

    TypeError: Cannot destructure 'undefined' or 'null'.

      21 |
      22 |
    > 23 | export const getLanguage = (state: Object, {}: Object) => {
         |                            ^
      24 |     return state.merge({})
      25 | }
      26 |

      at Object.getLanguage (src/redux/LanguageRedux.js:23:28)
      at Object.getLanguage (src/__tests__/src/redux/LanguageRedux.js:9:13)

现在，我将存储配置在不同的文件中，但 reducer 组合在不同的文件中:

import { combineReducers } from 'redux'
import configureStore from './CreateStore'

import rootSaga from '../sagas'

export default () => {
    /* ------------- Assemble The Reducers ------------- */
    const rootReducer = combineReducers({
        language: require('./LanguageRedux').reducer
    })

    return configureStore(rootReducer, rootSaga)
}

任何人都知道如何测试 redux 操作等。使用普通的 redux，我可以找到很多文章，但使用 reduxsauce 库，我似乎找不到任何东西。请问有什么线索吗？

Answer 1

正在测试什么
LanguageRedux.js有以下导出:

LanguageTypes - Action 类型 map

Creators - Action 创建者 map

INITIAL_STATE - 应用程序的初始状态

getLanguage和 setLanguage - reducer 功能

reducer - redux reducer

我建议使用预期的标识符导入所有内容，如下所示:

import Creators, {
  LanguageTypes,
  INITIAL_STATE,
  getLanguage,
  setLanguage,
  reducer
 } from '../../../redux/LanguageRedux';

备注 : 看起来像 getLanguage操作是不必要的，因为它对状态没有任何作用(如果应用程序正在获取它应该从状态中读取它的语言)，但我会把它留在那里，因为它在问题代码中。

语言类型
LanguageTypes只是 Action 类型与其关联字符串值的映射:

it('should export the expected action types', () => {
  expect(LanguageTypes).toEqual({
    GET_LANGUAGE: 'GET_LANGUAGE',
    SET_LANGUAGE: 'SET_LANGUAGE'
  });  // Success!
});

创作者
Creators是 Action 创建者的 map 。

每个 Action 创建者都是一个纯函数，它根据给定的参数生成一个 Action 对象:

describe('Creators', () => {

  describe('getLanguage', () => {

    it('should return the expected action', () => {
      expect(Creators.getLanguage()).toEqual({
        type: LanguageTypes.GET_LANGUAGE
      });
    });

    it('should ignore extra args', () => {
      expect(Creators.getLanguage('extra arg')).toEqual({
        type: LanguageTypes.GET_LANGUAGE
      });
    });

  });

  describe('setLanguage', () => {

    it('should return the expected action when passed nothing', () => {
      expect(Creators.setLanguage()).toEqual({
        type: LanguageTypes.SET_LANGUAGE
      });  // Success!
    });

    it('should return the expected action when passed a language', () => {
      expect(Creators.setLanguage('en')).toEqual({
        type: LanguageTypes.SET_LANGUAGE,
        language: 'en'
      });  // Success!
    });

    it('should ignore extra args', () => {
      expect(Creators.setLanguage('es', 'extra arg')).toEqual({
        type: LanguageTypes.SET_LANGUAGE,
        language: 'es'
      });  // Success!
    });

  });

});

INITIAL_STATE
INITIAL_STATE只是应用程序开始的初始状态对象:

it('should set the initial state ', () => {
  expect(INITIAL_STATE).toEqual({ language: "en" });  // Success!
});

reducer 功能
getLanguage和 setLanguage是 reducer 函数，这意味着它们是纯函数，它们根据给定的现有状态和 Action 返回新状态:

describe('reducers', () => {

  describe('getLanguage', () => {

    it('should do nothing (probably should not be an action)', () => {
      expect(getLanguage(INITIAL_STATE, {})).toEqual(INITIAL_STATE);  // Success!
    });

    it('should ignore extra args', () => {
      expect(getLanguage(INITIAL_STATE, { extra: 'arg' })).toEqual(INITIAL_STATE);  // Success!
    });

  });

  describe('setLanguage', () => {

    it('should set the language', () => {
      expect(setLanguage(INITIAL_STATE, { language: 'es' })).toEqual({
        language: 'es'
      });  // Success!
    });

    it('should ignore extra args', () => {
      expect(setLanguage(INITIAL_STATE, { language: 'fr', extra: 'arg' })).toEqual({
        language: 'fr'
      });  // Success!
    });

  });

});

请注意，使用 reduxsauce 测试 reducer 功能比测试标准更容易 redux reducer ，因为他们会 仅限 被要求采取他们旨在处理的行动。

reducer
reducer是 redux reducer，它的工作是将 action 路由到相应的 reducer 函数并返回结果状态:

describe('reducer', () => {

  it('should return initial state if passed nothing', () => {
    expect(reducer()).toEqual(INITIAL_STATE);  // Success!
  });

  it('should route GET_LANGUAGE to getLanguage', () => {
    expect(reducer(INITIAL_STATE, Creators.getLanguage())).toEqual(INITIAL_STATE);  // Success!
  });

  it('should route SET_LANGUAGE to setLanguage', () => {
    expect(reducer(Immutable({ language: 'es' }), Creators.setLanguage('fr'))).toEqual({
      language: 'fr'
    });  // Success!
  });

});

备注 : 有几种不同的方法 reducer可以测试。上述方法通过 reducer 函数一直传递状态和 Action 。它是彻底的，但也与上面的 reducer 功能测试有很多重叠。

最基本的替代方法是监视 createReducer并简单地验证它是用预期的 INITIAL_STATE 调用的和映射对象。

介于上述方法和完整方法之间的方法是模拟 reducer 函数，通过 reducer各种操作，并验证是否调用了正确的 reducer 函数。这可能是 理想方法，但很难实现自 createReducer 以来的代码当前编写方式导入代码后立即运行并捕获对本地函数的引用 setLanguage和 getLanguage .如果您想使用这种方法，那么最简单的方法是移动 reducer到它自己的模块，这样你就可以在导入 reducer 之前模拟化简器函数进入你的测试代码。