用 vitest 模拟 graphql-request

Question

我一直在尝试用 vitest 模拟我的 graphql 请求。请求看起来是这样的：

    const getTastyFruit = gql`
    query Fruit($id: String!) {
      fruit(id: $id) {
        shop {
          shopId
        }
      }
    }
  `;

此请求是更大蓝图的一部分。让我们从上到下。我有一个 lambda，它位于 API 网关端点上。该 lambda 调用

TropicalWorld

客户端。这个客户端有很多方法，其中之一：

CheckIfFruitIsReallyTasty

。这是我的

TropicalWorld

类（客户端）的私有异步方法。

CheckIfFruitIsReallyTasty

初始化一个新的graphql客户端。

const fruitsClient = new GraphQLClient(
      "https://www.tastyfruits.com",
      { headers: { Authorization: `Bearer ${accessToken}` } },
    );

然后我的查询开始发挥作用：

const getTastyFruit = gql`
        query Fruit($id: String!) {
          fruit(id: $id) {
            shop {
              shopId
            }
          }
        }
      `;

然后有一个 try catch 块，它基本上等待查询的响应：

const response= await fruitsClient.request(getTastyFruit, {
        id,
      });

我真的尝试了不同的方法，用 vitest 来模拟这个 graphql 请求，但无论我做什么，我都会收到错误

ERROR status code: 404, status text: undefined

vi.mock('graphql-request', () => ({

  GraphQLClient: class {
    request = vi.fn(); 
  },
  gql: (text: string) => text,
}));

这表明我的客户端仍然向 graphql 服务器发出请求。我唯一真正感兴趣的是响应，我真的想模拟它，这样我就可以测试快乐路径和错误路径。但正如我所说， vitest graphql 模拟并不真正适合我。有什么想法吗？

Answer 1

错误来自我的测试代码中的不同位置。一般来说，我在官方 vitest 文档中找到了一个模拟 graphql 的好方法。不过我必须为此安装 msw...

import { afterAll, afterEach, beforeAll } from 'vitest'
import { setupServer } from 'msw/node'
import { HttpResponse, graphql, http } from 'msw'

const posts = [
  {
    userId: 1,
    id: 1,
    title: 'first post title',
    body: 'first post body',
  },
  // ...
]

export const restHandlers = [
  http.get('https://rest-endpoint.example/path/to/posts', () => {
    return HttpResponse.json(posts)
  }),
]

const graphqlHandlers = [
  graphql.query('ListPosts', () => {
    return HttpResponse.json(
      {
        data: { posts },
      },
    )
  }),
]

const server = setupServer(...restHandlers, ...graphqlHandlers)

// Start server before all tests
beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))

//  Close server after all tests
afterAll(() => server.close())

// Reset handlers after each test `important for test isolation`
afterEach(() => server.resetHandlers())

这是链接