如何使用Jest和Sinon测试Thunk操作

我正在创建一个简单的操作，以便使用Thunk从API获取一些数据。它看起来像这样：如何使用Jest和Sinon测试Thunk操作

import fetch from 'isomorphic-fetch'; 

function json(response) { 
    return response.json(); 
} 

/** 
* Fetches books from the server 
*/ 
export function getBooks() { 
    return function(dispatch) { 
    fetch("http://localhost:1357/book", {mode: "cors"}) 
    .then(json) 
    .then(function(data) { 
     dispatch({ 
     type: "GET_BOOKS", 
     devices: data 
     }); 
    }); 
    } 
};

应该叫fetch一次。我已经证实它是这样做的，因为它在Web浏览器中调用时成功地提取数据。然而，当我写这篇文章的测试：

import fetch from 'isomorphic-fetch'; 
let spy = sinon.spy(fetch); 
import configureMockStore from 'redux-mock-store'; 
import thunk from 'redux-thunk'; 
import {getBooks} from '../../actions/getBooks'; 
import sinon from 'sinon'; 

const middlewares = [ thunk ]; 
const mockStore = configureMockStore(middlewares); 

describe('async actions',() => { 

    it('calls the server',() => { 
    const store = mockStore({books: []}); 
    store.dispatch(getBooks()); 
     expect(spy.callCount).toEqual(1); 
     spy.restore(); 
    }); 
});

然而，这个测试失败，而spy的呼叫次数为0。我怀疑这是由于获取由试验前的动作，这就是为什么要导入间谍是在文件的顶部创建的。但是，这不起作用。推荐使用fetch进行测试的方法是什么？

来源

2017-04-18 user2367593

从http://arnaudbenard.com/redux-mock-store/读取，部分异步操作。

我猜这是因为你没有在你的测试中使用诺言。

it('calls the server', (done) => { 
    const store = mockStore({books: []}); 
    store.dispatch(getBooks()).then(() => { 
     expect(spy.callCount).toEqual(1); 
     spy.restore(); 
     done(); 
    }); 
    });

来源

2017-04-21 06:42:55 OlliM

感谢您的帮助！当我运行测试时，出现'不能读取属性'的错误，然后'未定义'。我假设这意味着商店没有定义，但我们确实定义了它。任何想法为什么发生这种情况？ – user2367593

Nevermind - 我不得不改变代码来说'return fetch（localhost ...'而不是'fetch（localhost ...'）。 – user2367593

如何使用Jest和Sinon测试Thunk操作

回答

相关问题