如何模拟 graphQL/Apollo 查询响应以在 redux 中测试 action-creator？

Posted 2023-03-10

【中文标题】如何模拟 graphQL/Apollo 查询响应以在 redux 中测试 action-creator？

【英文标题】：How to mock qraphQL/Apollo query response for testing action-creator in redux?

【发布时间】：2019-04-07 23:19:07

【问题描述】：

由于我没有太多使用 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 这样的方法，解析promise 来模拟响应就足够了。这对我来说现在不适用于 graphql/apollo。在这种情况下如何模拟响应？

提前致谢

【问题讨论】：

嗨，您检查过 Apollo 模拟文档吗？ apollographql.com/docs/graphql-tools/mocking.html

是的，这不是客户端模拟

嗨，检查这个可能有用的答案***.com/a/53586472/8157186

【参考方案1】：

我看到 2 个问题：

1 - 您没有返回client.query 承诺，因此测试中的await fetchSomething 实际上并没有等待该承诺返回，然后再继续使用expect。 return client.query 应该可以解决这个问题。

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

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

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

【讨论】：

tnx，试试看