0

对以下 redux 异步操作进行单元测试的正确方法是什么？

const client = contentful.createClient(clientConfig);

export const fetchNavigation = () => {
  return dispatch => {

    return client.getEntries({content_type: 'navigation'})
      .then((entries) => {
        console.log('All entries for content_type = navigation')
        dispatch(receiveNavigation(entries))
      })
      .catch(error => {
      	console.log('Something went wrong');
      	dispatch(fetchNavigationFailure(error));
      });   
  }
}

我不知道如何自定义 client.getEntries 执行的 Web 请求响应正文。我认为用我自己的函数替换 getEntries 函数就可以了。但是，我不知道从哪里开始。

这是我写的单元测试：

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

describe('fetchNavigation', () => {
  it('creates RECEIVE_NAVIGATION when fetching navigation is done', () => {

    // Here I should prepare the client.getEntries() returned promise

    const expectedBodyResponse = { includes: ['do something', 'yay!'] }
    const expectedActions = [
      { type: actions.RECEIVE_NAVIGATION, navigation: expectedBodyResponse }
    ]
    const store = mockStore({ todos: [] })

    return store.dispatch(actions.fetchNavigation())
      .then(() => { 
        expect(store.getActions()).toEqual(expectedActions)
      })
  })
})

4

2 回答 2

0

我是这样解决的。首先，我使用函数 initClient() 和 getClient() 将客户端的创建移动到它自己的文件中。该模块称为 contentfulClient。

然后，我发现可以在 sinon 中模拟实例化对象的函数：

import * as contentful from './services/contentfulClient';

const client = contentful.initClient(clientConfig);
const navigation = {
  items: ['page1', 'page2']
};

// Returns a promise with navigation as content
sinon.stub(client, 'getEntries').resolves(navigation);

// Assert
return store.dispatch(actions.fetchNavigation())
      .then( () => {    	expect(store.getActions()).toEqual(expectedActions)
      })

于 2017-02-13T12:59:19.203 回答
0

IMO 嘲笑getEntries（并且可能createClient）似乎是正确的做法。:) 这取决于你如何加载contentfulsdk。正如我所见，您正在使用 ES 模块和 Jasmine，对吗？

要模拟该getEntries功能，您必须模拟该功能，createClient因为无法从您的测试中访问客户端。

我认为这个答案可能是您正在寻找的。

我只是写了一个例子。

import contentful from 'contentful';

export const fetchNavigation = () => {
  return (dispatch) => {
    return contentful.createClient({ accessToken: 'fooo', space: 'bar' })
      .getEntries({ content_type: 'navigation' })
      .then(() => {
        dispatch('yeah');
      })
      .catch(error => console.error('Something went wrong', error));
  };
};

import { fetchNavigation } from '../Action';
import * as contentful from 'contentful';

describe('Contentful mocking', () => {
  it('should be possible to mock Contentful', (done) => {
    const client = { getEntries: () => { return Promise.resolve(); } };
    const spy = {
      fn: (value) => {
        expect(value).toBe('yeah');
        done();
      },
    };

    spyOn(contentful.default, 'createClient').and.returnValue(client);

    fetchNavigation()(spy.fn);
  });
});

我不得不将createClient调用移动到动作本身，因为否则我认为当它隐藏在模块范围内时不可能达到和模拟它。然后我使用import * as contentful from 'contentful'来模拟和覆盖所需的功能，并灵活地根据我的需要调整一切。

对我来说，使用createClient感觉有点不幸。我可能会对所有内容进行一些重组，并将client所有操作的 as 依赖传递给？这样模拟会变得更容易，并且当您还有多个动作模块时，很可能不需要多次初始化客户端？

于 2017-02-13T10:49:43.260 回答