如何对 reduxsauce 进行单元测试?
How to unit test reduxsauce?
我正在为 redux 存储使用 reduxsauce 库,我想对其中的单个 redux 存储进行单元测试。
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 库我似乎找不到任何东西。请问有什么线索吗?
正在测试什么
LanguageRedux.js
有以下出口:
LanguageTypes
- 动作类型映射
Creators
- 动作创作者地图
INITIAL_STATE
- 应用程序的初始状态
getLanguage
和 setLanguage
- reducer 函数
reducer
- redux reducer
我建议像这样导入具有预期标识符的所有内容:
import Creators, {
LanguageTypes,
INITIAL_STATE,
getLanguage,
setLanguage,
reducer
} from '../../../redux/LanguageRedux';
注意:看起来 getLanguage
操作是不必要的,因为它对状态没有任何作用(如果应用程序正在获取它应该从中读取的语言州),但我会把它留在那儿,因为它在问题代码中。
语言类型
LanguageTypes
只是操作类型与其关联字符串值的映射:
it('should export the expected action types', () => {
expect(LanguageTypes).toEqual({
GET_LANGUAGE: 'GET_LANGUAGE',
SET_LANGUAGE: 'SET_LANGUAGE'
}); // Success!
});
创作者
Creators
是动作创作者的地图
每个动作创建器都是一个纯函数,它根据给定的参数生成一个动作对象:
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 函数,这意味着它们是纯函数 return 基于给定的现有状态和操作的新状态:
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
是 redux reducer,它的工作是将操作路由到相应的 reducer 函数和 return 结果状态:
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 函数一直传递状态和动作。它很彻底,但也与上面的 reducer 功能测试有很多重叠。
最基本的替代方法是监视 createReducer
并简单地验证它是用预期的 INITIAL_STATE
和映射对象调用的。
介于该方法和上述完整方法之间的方法是模拟 reducer 函数,传递 reducer
各种操作,并验证是否调用了正确的 reducer 函数。这可能是 理想的 方法,但是很难实现当前编写代码的方式,因为 createReducer
在代码被导入并捕获对本地函数的引用后立即运行setLanguage
和 getLanguage
。如果你想使用这种方法,那么最简单的方法就是将 reducer
移动到它自己的模块中,这样你就可以在 before importing reducer
之前模拟 reducer 函数] 到你的测试代码中。
我正在为 redux 存储使用 reduxsauce 库,我想对其中的单个 redux 存储进行单元测试。 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 库我似乎找不到任何东西。请问有什么线索吗?
正在测试什么
LanguageRedux.js
有以下出口:
LanguageTypes
- 动作类型映射Creators
- 动作创作者地图INITIAL_STATE
- 应用程序的初始状态getLanguage
和setLanguage
- reducer 函数reducer
- redux reducer
我建议像这样导入具有预期标识符的所有内容:
import Creators, {
LanguageTypes,
INITIAL_STATE,
getLanguage,
setLanguage,
reducer
} from '../../../redux/LanguageRedux';
注意:看起来 getLanguage
操作是不必要的,因为它对状态没有任何作用(如果应用程序正在获取它应该从中读取的语言州),但我会把它留在那儿,因为它在问题代码中。
语言类型
LanguageTypes
只是操作类型与其关联字符串值的映射:
it('should export the expected action types', () => {
expect(LanguageTypes).toEqual({
GET_LANGUAGE: 'GET_LANGUAGE',
SET_LANGUAGE: 'SET_LANGUAGE'
}); // Success!
});
创作者
Creators
是动作创作者的地图
每个动作创建器都是一个纯函数,它根据给定的参数生成一个动作对象:
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 函数,这意味着它们是纯函数 return 基于给定的现有状态和操作的新状态:
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
是 redux reducer,它的工作是将操作路由到相应的 reducer 函数和 return 结果状态:
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 函数一直传递状态和动作。它很彻底,但也与上面的 reducer 功能测试有很多重叠。
最基本的替代方法是监视 createReducer
并简单地验证它是用预期的 INITIAL_STATE
和映射对象调用的。
介于该方法和上述完整方法之间的方法是模拟 reducer 函数,传递 reducer
各种操作,并验证是否调用了正确的 reducer 函数。这可能是 理想的 方法,但是很难实现当前编写代码的方式,因为 createReducer
在代码被导入并捕获对本地函数的引用后立即运行setLanguage
和 getLanguage
。如果你想使用这种方法,那么最简单的方法就是将 reducer
移动到它自己的模块中,这样你就可以在 before importing reducer
之前模拟 reducer 函数] 到你的测试代码中。