与 Apollo 客户端开玩笑 - 在 React 挂钩上下文中调用 useQuery 测试 React 应用程序

问题描述

我在使用 Jest 和 React-test-renderer 测试 React hooks 应用程序时遇到问题。当我将 useQuery 放入 react hooks 上下文文件时定义的问题。

我在这个 apollo docs https://www.apollographql.com/docs/react/development-testing/testing/ 之后有一个类似的文件，但只是在 react hooks 上下文文件中调用 useQuery 不同。

CatContext.js

import React,{createContext} from 'react';
import { GET_ALL_CATS } from 'graphqlquery/Queries';
import { useQuery } from '@apollo/client';

export const CatContext = createContext();

export default function CatContextProvider(props) {
    const { loading,error,data } = useQuery(GET_ALL_CATS);
        
    return (
        <CatContext.Provider value={{loading,data}}>
            {props.children}
        </CatContext.Provider>
    );
}

App.js

export function CatList() {
    const {loading,data} = useContext(CatContext);
    if(loading) return <div>Loading...</div>;
    if(error) return <div>Error...</div>;
    return (
        <div>
            <div>
                    {data.cat.name} is a {data.cat.breed}
            </div>
        </div>
    );
}

App.test.js

import React from 'react';
import { MockedProvider } from '@apollo/client/testing';
import TestRenderer from 'react-test-renderer';
import "regenerator-runtime/runtime";
import { CatList } from 'components/CatList';
import { GET_ALL_CATS } from 'graphqlquery/Queries';

const mocks = [
    {
      request: {
        query: GET_ALL_CATS,},result: {
        data: {
            cat: { id: '1',name: 'Buck',breed: 'bulldog' },}
      }
    }
  ]

  it('renders without error',() => {
    const component = TestRenderer.create(
      <MockedProvider mocks={mocks} addTypename={false}>
        <CatList  />
      </MockedProvider>,);
  
    const tree = component.toJSON();
    expect(tree.children).toContain('Loading...');
  });

如果我在 App.js 中调用 useQuery，则问题不存在，但是当我在 CatContext 中调用 useQuery 时，它提供了一个错误：TypeError: Cannot read property 'loading' of undefined.

有没有想过为什么我从 loading 调用的 useQuery 的 CatContext.js 是未定义的？以及如何修复它？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）