如何在 React 中测试 readFragment？

Posted 2023-03-10

【中文标题】如何在 React 中测试 readFragment？

【英文标题】：How to test readFragment in React?

【发布时间】：2020-07-03 22:19:38

【问题描述】：

我正在使用 Apollo + React + Jest。

我在 Apollo 缓存中有数据，然后我也在 React 中从中获取数据。

但我在测试时无法获取数据。

readFragment 和 useQuery 获取数据的方式不同。

所以我不能用同样的方法在我的单元测试文件中测试readFragment。

我尝试模拟 provider 和 client，但它不起作用。

readFragment在测试中有解决方案吗？

我的反应文件

import React from "react";
import  useApolloClient  from "@apollo/react-hooks";

const FileInfo: React.FC<Props> = props => 
  const client = useApolloClient();
  const file = client.readFragment(
    id: `Rendition-222-333`,
    fragment: gql`
      fragment rendition on Rendition 
        status
        title
      
    `,
  );

  return (
    <>
      <p> file.status </p>
      <p> file.title </p>
    </>
  );

【参考方案1】：

我的朋友给了我一个解决方案，如果有人需要，我在这里发布。

import  useApolloClient  from "@apollo/react-hooks";
jest.mock("@apollo/react-hooks");

describe("<FileInfo/>", () => 
  let useApolloClientMock: jest.Mock;
  beforeEach(() => 
    useApolloClientMock = useApolloClient as jest.Mock;
    useApolloClientMock.mockReturnValue(
      readFragment: jest.fn().mockReturnValue( status: "downloaded", title: "123test" ),
    );
  );

  afterEach(jest.resetAllMocks);

  test("When it renders Then it should not crash", () => 
    const  container  = setup();
    expect(container).toBeTruthy();
  );

);