如何用jest测试redux saga？
Jpl*_*us2 8 testing reactjs jest redux-saga
只是新的反应,react-redux/saga和jest
考虑:
----- Componnent()----
componentDidMount() {
this.props.actions.initTodos(
axios,
ajaxURLConstants.WP_GET_TODOS,
appStateActions.setAppInIdle,
appStateActions.setAppInProcessing,
todosActions.todosInitialized
);
}
因此,当我的TodoApp组件安装时,它将调度INIT_TODOS操作,然后我的根传奇正在侦听,当它捕获它时,将生成相应的工作者传奇以相应地执行操作.
-----相应的工人传奇-----
export function* initTodosSaga( action ) {
try {
yield put( action.setAppInProcessing() );
let response = yield call( action.axios.get , action.WP_GET_TODOS );
if ( response.data.status === "success" )
yield put( action.todosInitialized( response.data.todos ) );
else {
console.log( response );
alert( response.data.error_msg );
}
} catch ( error ) {
console.log( "error" , error );
alert( "Failed to load initial data" );
}
yield put( action.setAppInIdle() );
}
-----迄今为止的测试-----
import todos from "../../__fixtures__/todos";
import { initTodosSaga } from "../todosSaga";
test( "saga test" , () => {
let response = {
status : "success",
todos
},
action = {
axios : {
get : function() {
return new Promise( ( resolve , reject ) => {
resolve( response );
} );
}
},
WP_GET_TODOS : "dummy url",
setAppInIdle : jest.fn(),
setAppInProcessing : jest.fn(),
todosInitialized : jest.fn()
};
let initTodosSagaGen = initTodosSaga( action );
initTodosSagaGen.next();
expect( action.setAppInIdle ).toHaveBeenCalled();
} );
-----测试结果-----
所以重要的是这个
console.error node_modules\redux-saga\lib\internal\utils.js:240
在check put(动作)中未被捕获:参数动作未定义
但是我有console.log我在工作者传奇中传递的测试动作,实际上并没有未定义
我错过了什么？
提前致谢.
---------- ------------更新
好的注意,它在这行代码上抱怨它
yield put( action.setAppInIdle() );
哪个在try catch块之外,所以我进行了一些更改
1.)我将上面的代码移到try catch块中,就在else语句之后
if ( response.data.status === "success" )
请检查上面的initTodosSaga代码
然后在我的传奇测试中,我测试
expect( action.setAppInProcessing ).toHaveBeenCalled();
而不是setAppInIdle间谍功能
这是测试结果
所以考试通过了!但仍然抱怨行动未定义
现在有趣的是,如果在我的传奇测试中,如果我现在测试它
expect( action.setAppInProcessing ).toHaveBeenCalled();
expect( action.setAppInIdle ).toHaveBeenCalled();
这是结果
所以现在它仍然抱怨动作仍未定义(我没有包含在我的截图中,但仍然与上面相同)
再加上第二个断言我对setAppInIdle没有调用spy函数,但setAppInProcessing确实通过了!
我希望这些额外的信息有助于解决这个问题.
在没有任何外部库帮助的情况下，似乎很难测试 redux saga
对我来说，我使用了 https://github.com/jfairbank/redux-saga-test-plan
这个图书馆非常好。
现在这是我的测试
--------------------测试1---------------------
因此，对于这个测试，我传递了动作有效负载，几乎是传奇运行所需的所有内容，例如。axios 、动作创建函数等...更像是遵循依赖注入的原则，因此很容易测试。
-----TodoApp组件-----
componentDidMount() {
this.props.actions.initTodos(
axios,
ajaxURLConstants.WP_GET_TODOS,
appStateActions.setAppInIdle,
appStateActions.setAppInProcessing,
todosActions.todosInitialized,
todosActions.todosFailedInit
);
}
因此，当组件安装时，它会触发一个操作，我的 root saga 会监听并捕获该操作，然后生成适当的工作人员 saga 来进行相应的操作
再次注意，我传递了工作人员传奇在操作有效负载上正确运行所需的所有必要数据。
-----initTodoSaga（工人传奇）-----
export function* initTodosSaga( action ) {
try {
yield put( action.setAppInProcessing() );
let response = yield call( action.axios.get , action.WP_GET_TODOS );
if ( response.data.status === "success" )
yield put( action.todosInitialized( response.data.todos ) );
else {
console.log( response );
alert( response.data.error_msg );
yield put( action.todosFailedInit( response ) );
}
} catch ( error ) {
console.log( "error" , error );
alert( "Failed to load initial data" );
yield put( action.todosFailedInit( error ) );
}
yield put( action.setAppInIdle() );
}
-----佐贺测试-----
import { expectSaga } from "redux-saga-test-plan";
import { initTodosSaga } from "../todosSaga";
test( "should initialize the ToDos state via the initTodoSaga" , () => {
let response = {
data : {
status : "success",
todos
}
},
action = {
axios : {
get : function() {
return new Promise( ( resolve , reject ) => {
resolve( response );
} );
}
},
WP_GET_TODOS : "dummy url",
setAppInIdle : appStateActions.setAppInIdle,
setAppInProcessing : appStateActions.setAppInProcessing,
todosInitialized : todosStateActions.todosInitialized,
todosFailedInit : todosStateActions.todosFailedInit
};
// This is the important bit
// These are the assertions
// Basically saying that the actions below inside the put should be dispatched when this saga is executed
return expectSaga( initTodosSaga , action )
.put( appStateActions.setAppInProcessing() )
.put( todosStateActions.todosInitialized( todos ) )
.put( appStateActions.setAppInIdle() )
.run();
} );
我的测试通过了耶！:) 现在为了向您展示测试失败时的错误消息，我将在initTodosSaga中注释掉这行代码
yield put( action.setAppInIdle() );
所以现在断言
.put( appStateActions.setAppInIdle() )
现在应该失败
所以它输出put Expectation unmet这是有道理的，因为我们期望被解雇的动作没有
--------------------测试2--------------------
现在这个测试是针对一个传奇，它导入了一些需要操作的东西，这与我的第一个测试不同，我在第一个测试中在动作有效负载中提供 axios、动作创建者
这个saga导入了axios，它需要actioncreators来操作
值得庆幸的是，Redux Saga 测试计划有一些辅助函数可以将虚拟数据“馈送到” saga 中
我将跳过触发 root saga 正在侦听的操作的组件，这并不重要，我将直接粘贴 saga 和 saga 测试
----添加TodoSaga----
/** global ajaxurl */
import axios from "axios";
import { call , put } from "redux-saga/effects";
import * as appStateActions from "../actions/appStateActions";
import * as todosActions from "../actions/todosActions";
export function* addTodoSaga( action ) {
try {
yield put( appStateActions.setAppInProcessing() );
let formData = new FormData;
formData.append( "todo" , JSON.stringify( action.todo ) );
let response = yield call( axios.post , ajaxurl + "?action=wptd_add_todo" , formData );
if ( response.data.status === "success" ) {
yield put( todosActions.todoAdded( action.todo ) );
action.successCallback();
} else {
console.log( response );
alert( response.data.error_msg );
}
} catch ( error ) {
console.log( error );
alert( "Failed to add new todo" );
}
yield put( appStateActions.setAppInIdle() );
}
- - -考试 - - -
import axios from "axios";
import { expectSaga } from "redux-saga-test-plan";
import * as matchers from "redux-saga-test-plan/matchers";
import * as appStateActions from "../../actions/appStateActions";
import * as todosStateActions from "../../actions/todosActions";
import { addTodoSaga } from "../todosSaga";
test( "should dispatch TODO_ADDED action when adding new todo is successful" , () => {
let response = {
data : { status : "success" }
},
todo = {
id : 1,
completed : false,
title : "Browse 9gag tonight"
},
action = {
todo,
successCallback : jest.fn()
};
// Here are the assertions
return expectSaga( addTodoSaga , action )
.provide( [
[ matchers.call.fn( axios.post ) , response ]
] )
.put( appStateActions.setAppInProcessing() )
.put( todosStateActions.todoAdded( todo ) )
.put( appStateActions.setAppInIdle() )
.run();
} );
因此，提供函数允许您模拟函数调用，同时提供它应该返回的虚拟数据
就是这样，我现在可以测试我的传奇了！耶！
另一件事是，当我为我的传奇运行测试时，会导致执行带有警报代码的代码
前任。
alert( "Earth is not flat!" );
我在控制台上得到了这个
Error: Not implemented: window.alert
以及它下面的一堆堆栈跟踪，所以可能是因为节点上不存在警报对象？我该如何隐藏这个？如果你们有答案，请添加评论。
我希望这对任何人都有帮助
| 归档时间： |
|
| 查看次数： |
8768 次 |
| 最近记录： |