为什么会出现此错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义

Question

我正在尝试为 React/TypeScript 组件编写一个笑话单元测试，但我不断收到错误

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

我绝对没有错误地导入/导出。有谁知道我为什么会收到此错误？

我的单元测试文件

import * as React from "react";
import { render } from "@testing-library/react";
import { DefaultTitleRenderer } from "./default-title-renderer"; // component that is failing
import { ApolloProvider } from "@test/frameworks-react-apollo";
import { createApolloClientMock } from "@test/utilities-test-apollo";
const mockClient = createApolloClientMock();

jest.mock("@test/components-1", () => ({
  use1Context: jest.fn(),
}));

jest.mock("@test/frameworks-react-apollo", () => ({
  useQuery: jest.fn(),
}));

describe("DefaultTitleRenderer", () => {
  it("renders the header title", () => {
    const { getByTestId } = render(
      <ApolloProvider client={mockClient}>
        <DefaultTitleRenderer />
      </ApolloProvider>
    );
    const pageHeader = getByTestId("example");
    expect(pageHeader).toBeInTheDocument();
  });
});

我的 DefaultTitleRenderer 组件

import * as React from "react";
import {
  StyledText,
  Button,
  Tooltip,
} from "@test/components-fluent-ui";
import { exampleQuery } from "@test/data-resolvers-example";
import { useQuery } from "@test/frameworks-react-apollo";


export const DefaultTitleRenderer : React.FunctionComponent<{}> = () => {
  const styles = styles();
  return (
    <div
      data-tid="example"
      className={styles.defaultHeader}
    >
      <HeaderTitle />
    </div>
  );
};

DefaultTitleRenderer.displayName = "DefaultTitleRenderer";

const HeaderTitle: React.FunctionComponent = () => {
  const { data } = useQuery(exampleQuery, {
    partialRefetch: true,
    notifyOnNetworkStatusChange: true,
    fetchPolicy: "cache-and-network",
    nextFetchPolicy: "cache-first",
  });

  const styles = someStyles();
  // more code here but not relevant
  return (
    <React.Fragment>
      <Tooltip
        content={"Go Back"}
        data-tid="test"
        positioning="below"
        relationship="label"
        children={
          <Button
            icon={<ArrowStartIcon />}
            appearance="transparent"
            data-tid="test2"
            onClick={handleBackNavigation}
          ></Button>
        }
      />
      <StyledText
        weight="bold"
        data-tid="header"
        aria-hidden="true"
        className={styles.titleText}
      >
        {data}
      </StyledText>
    </React.Fragment>
  );
};

Answer 1

由于某种原因，将 DefaultTitleRenderer 包装在 ApolloProvider 中使其返回未定义。我删除了包装器并刚刚渲染了我的组件，它解决了这个问题。