反应测试库渲染表未定义

Question

供应商表.tsx

import React, { useState } from "react";
import { Table } from "antd";
import * as QC from "api/Cache/VendorMemberManagement";
import * as Request from "api/Resources/VendorMemberManagement";
import { useQuery } from "react-query";

const cols = [
    {
        key: "colA",
        title: "COL A",
        dataIndex: "colA",
        width: 180,
    },
    {
        key: "colB",
        title: "COL B",
        dataIndex: "colB",
        width: 180,
    },
    {
        key: "colC",
        title: "COL C",
        dataIndex: "colC",
        width: 180,
    },
]

const VendorTable = () => {
    const [dataList, setDataList] = useState([]);

    const vendorMemberList = useQuery(
    [QC.VENDOR_MEMBER_MANAGEMENT___GET_VENDOR_MEMBER_LIST],
    async () => {
      return await Request.getVendorMemberList();
    },
    {
      onSuccess: async (data) => {
        setDataList(data);
      },
    }
  );

    return (
        <Table
            columns={cols}
            dataSource={dataList}
            pagination={false}
            scroll={{ y: "calc(100vh - 228px)" }}
        />
    )
};

export default VendorTable;

供应商表.spec.tsx

import React from "react";
import { render, waitFor, screen } from "@testing-library/react";
import {
  QueryClient,
  QueryClientProvider,
} from "react-query";
import VendorTable from "../VendorTable";
import { RecoilRoot } from "recoil";

jest.mock("react-query", () => {
  return {
    ...jest.requireActual("react-query"),
    useQuery: jest
      .fn()
      .mockImplementation((queryKey) => {
        if (queryKey[0] === "VENDOR_MEMBER_MANAGEMENT___GET_VENDOR_MEMBER_LIST") {
          return {
            data: [
              {
                colA: "Test_A",
                colB: "Test_B",
                colC: "Test_C",
              },
            ],
            isFetching: false,
            isSuccess: true,
          };
        }
      }),
  };
});


describe("VendorTable", () => {
  test("VendorTable component renders correctly", async () => {
    const queryClient = new QueryClient();

    const { getByText } = render(
      <RecoilRoot>
        <QueryClientProvider client={queryClient}>
          <VendorTable />
        </QueryClientProvider>
      </RecoilRoot>
    );

    await waitFor(() => {
      expect(getByText("COL A")).toBeInTheDocument();
    })
    
  });
});

我已经为 VendorTable 编写了单元测试，但一直存在错误。我怀疑该问题可能是由模拟 useQuery 引起的。 有人可以帮我确定问题可能出在哪里吗？谢谢。

错误消息：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记从定义它的文件中导出组件，或者您可能混淆了默认导入和命名导入。

Answer 1

由于您正在嘲笑

useQuery

，因此您在测试中不需要

new QueryClient

，请尝试删除它：

jest.mock('react-query', () => {
  return {
    ...jest.requireActual('react-query'),
    useQuery: jest.fn().mockReturnValue({
      data: [
        {
          colA: 'Test_A',
          colB: 'Test_B',
          colC: 'Test_C',
        },
      ],
      isFetching: false,
      isSuccess: true,
    }),
  };
});


describe("VendorTable", () => {
  test("VendorTable component renders correctly", async () => {
    const queryClient = new QueryClient();

    const { getByText } = render(<VendorTable />);

    await waitFor(() => {
      expect(getByText("COL A")).toBeInTheDocument();
    })
    
  });
});

奖励：我什至会嘲笑蚂蚁设计表，只是希望它能用 XYZ 道具来调用

import { Table } from 'antd';
jest.mock('antd');

expect(Table.mock.calls[0][0].dataSource).toEqual(XYZ);

// component would need to change, consume directly instead of using useState

const VendorTable = () => {
  const { data } = useQuery(
    [QC.VENDOR_MEMBER_MANAGEMENT___GET_VENDOR_MEMBER_LIST],
    async () => {
      return await Request.getVendorMemberList();
    },
    {
      onSuccess: async (data) => {
        setDataList(data);
      },
    },
  );

  return <Table columns={cols} dataSource={data} pagination={false} scroll={{ y: 'calc(100vh - 228px)' }} />;
};


export default VendorTable;