为什么在我的玩笑测试中没有调用 client.query？

Question

嘲笑阿波罗钩子

jest.mock("@apollo/client", () => ({
  ...jest.requireActual("@apollo/client"),
  useApolloClient: () => ({
    query: jest.fn().mockResolvedValueOnce({
      data: { myReturnValue: { some: "data" } },
      loading: false,
      errors: undefined,
    }),
  }),
}))

我的功能

  const myFunction = (input) => {
    console.log("called this?") // this 100% gets called in the test
    const data = { ...defaultData, ...input }

    return client
      .query({
        query: Query,
        fetchPolicy: "network-only",
        variables: {},
      })
      .then(({ data, errors }) => {
        if (!data?) {
          alert(errors)
        } else {
          console.log("in else block") // this 100% gets called in the test
          runFunction()
        }
      })
  }

在我的测试中它正在记录：“在其他块中”

在我的测试中我有：

fireEvent.click(screen.getByText("My Button Text"))
await waitFor(() => expect(useApolloClient().query).toBeCalledTimes(1))

在测试输出中我得到

Expected number of calls: 1
Received number of calls: 0

这是为什么呢？当它进入日志时，它肯定被称为

client.query

Answer 1

正如 @phry 所说，不要嘲笑

@apollo/client

模块。相反，请遵循测试 React 组件指南。

例如

index.tsx

：

import React, { useState } from 'react';
import { gql, useApolloClient } from '@apollo/client';

export const GET_DOG_QUERY = gql`
  query GetDog($name: String) {
    dog(name: $name) {
      id
      name
      breed
    }
  }
`;

export function SomeComponent() {
  const client = useApolloClient();

  const [data, setData] = useState();
  console.log("🚀 ~ SomeComponent ~ data:", data)

  const onClick = () => {
    client
      .query({
        query: GET_DOG_QUERY,
        fetchPolicy: 'network-only',
        variables: {
          name: 'Buck',
        },
      })
      .then(({ data, errors }) => {
        setData(data);
      });
  };

  return (
    <div>
      <button onClick={onClick}>My Button Text</button>
      {data && <span>{data.dog.breed}</span>}
    </div>
  );
}

index.test.tsx

：

import React from 'react';
import { MockedProvider } from '@apollo/client/testing';
import { GET_DOG_QUERY, SomeComponent } from '.';
import { fireEvent, render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';

describe('78333569', () => {
  test('should pass', async () => {
    const mocks = [
      {
        request: {
          query: GET_DOG_QUERY,
          variables: {
            name: 'Buck',
          },
        },
        result: {
          data: {
            dog: { id: '1', name: 'Buck', breed: 'bulldog' },
          },
        },
      },
    ];

    render(
      <MockedProvider mocks={mocks} addTypename={false}>
        <SomeComponent />
      </MockedProvider>,
    );

    fireEvent.click(screen.getByText('My Button Text'));
    expect(await screen.findByText('bulldog')).toBeInTheDocument();
  });
});

测试结果：

  console.log
    🚀 ~ SomeComponent ~ data: undefined

      at log (stackoverflow/78333569/index.tsx:18:11)

  console.log
    🚀 ~ SomeComponent ~ data: { dog: { id: '1', name: 'Buck', breed: 'bulldog' } }

      at log (stackoverflow/78333569/index.tsx:18:11)

 PASS  stackoverflow/78333569/index.test.tsx
  78333569
    √ should pass (78 ms)                                                                                                                                                                                                                            
                                                                                                                                                                                                                                                     
Test Suites: 1 passed, 1 total                                                                                                                                                                                                                       
Tests:       1 passed, 1 total                                                                                                                                                                                                                       
Snapshots:   0 total
Time:        1.332 s, estimated 3 s
Ran all test suites related to changed files.

封装版本：

"@apollo/client": "^3.9.11"