Question

由于我对graphQL / Apollo经验不足，因此模拟查询响应与Jest进行测试使我感到困惑。我有以下动作创建者：

export const fetchSomething = _id => (dispatch) => {
  client.query({
    query: gql`
    {
      something(_id: "${_id}") {
        _id
        somedata
      }
    }`,
  })
    .then(something => dispatch({
      type: FETCH_SOMETHING,
      payload: something.data,
    }));
};

下面的测试无效

  describe('fetchSomething', () => {
    it('should dispatch correct type and data correctly', async () => {
      const dispatch = jest.fn();
      client.query =
        async () => new Promise(resolve => resolve({ something: 'something' }));
      await fetchSomething('xxx')(dispatch);
      expect(dispatch).toHaveBeenCalledWith({ type: FETCH_SOMETHING,   payload: {something: 'something');
    });
  });

我的ApolloClient.js文件

import ApolloClient from 'apollo-boost/lib/index.umd';

const client = new ApolloClient({
  uri: 'http://localhost:5000/graphql',
});

export default client;

通常，对于fetch之类的方法，足以解决对响应进行模拟的诺言。现在对我来说，哪个不适用于graphql / apollo。在这种情况下，如何模拟响应？

提前感谢

Answer 1

我看到2个问题：

1-您没有返回client.query承诺，因此测试中的await fetchSomething实际上并没有等待该承诺返回，而是继续前进到expect。 return client.query应该可以解决此问题。

2-您可能还需要将客户端注入到动作创建器中。 redux-thunk有一个withExtraArgument选项，您可以这样做。创建Redux存储并应用中间件时，您可以传递实际的Apollo客户端，然后在测试中可以通过模拟的client传递query：

await fetchSomething('xxx')(dispatch, _, client); // the 2nd argument (getState) is unused

https://github.com/reduxjs/redux-thunk

如何在Redux中模拟qraphQL / Apollo查询响应以测试动作创建者？

1 个答案: