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

Question

我正在创建一个简单的操作来使用 Thunk 从 API 中获取一些数据。它看起来像这样：

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 一次。我已经验证它确实这样做了，因为它在网络浏览器中调用时成功地提取了数据。然而，当我写这个测试时：

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，这就是为什么在文件的顶部。但是，这不起作用。测试 fetch 被调用的推荐方法是什么？

Answer 1

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

我猜这是因为您没有在测试中使用 promise。

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

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

How to test Thunk actions with Jest and Sinon

reactjs

redux

jestjs

redux-thunk