带有 React 测试库的模拟 Apollo Provider 不返回数据

Question

I've been trying to fix this problem for a couple days and I'm still at a loss.

I have a React app that uses Apollo Client and I want to test one component with the React testing library. Omitting all the irrelevant details, my main file code looks like that:

const ComponentToTest = () => {
  ...
  const { data, loading } = useComponentRespQuery({
    variables: {
      id: idValue
    },
    skip: !idValue
  });

  if (loading) {
    return <>Loading</>;
  }
  ...
}

And the test is written like that:

const componentRender = (mockGraphQLData: any, initialEntry: string = "") => render(
      <MemoryRouter initialEntries={[initialEntry]}>
        <MockedProvider mocks={[ mockGraphQLData ]} addTypename={false}>
            <ComponentToTest />
        </MockedProvider>
      </MemoryRouter>
    );
    
    describe("ComponenToTest", () => {
      it("should render a component to test", async() => {
        componentRender(zoneMock);
        const placeHolderValues = await screen.findByText(/Bla/i);
        expect(placeHolderValues).toBeInTheDocument();
      });
      ...
    }

Where componentRespDocument is equal to

    query GetResp($id: ID!) {
  resp(id: $id) {
    id
    name
    description
    controls {
      id
      name
    }
  }

And my mock is written like that

export const componentRespMock = {
  request: {
    query: componentRespDocument
  },
  result: {
    data: {
      resp: {
        id: "ID",
        name: "NAME",
        description: "DESCRIPTION",
        controls: [
          {
            id: "CTRL_2",
            name: "Second control"
          }
        ]
      }
    }
  }
};

I can confidently say that this way of testing worked before in my codebase. I found one way to make Apollo return the right value while testing, and it was to comment out all the code in useComponentRespQuery . Anybody faced it before and knows how to fix it?

Answer 1

It is a bit hard to say without knowing what's under the hood in MockedProvider provider. However, in my experience with mocks they should always match (1:1), especially if it works when you comment out { variables: { id: idValue }, skip: !idValue } inside useComponentRespQuery .
I would suggest double checking zoneMock to make sure that it matches what you expect