您可以创建自己的主题包装函数

import React from "react";
import { ThemeProvider } from "@chakra-ui/core/dist";

export const ThemeWrapper = ({ children }) => (
  <ThemeProvider>{children}</ThemeProvider>
);

然后在测试中指定包装器

import React from "react";
import { render } from "@testing-library/react";
import { ThemeWrapper } from "../testUtils";

import App from "./App";

describe("<App />", () => {
  test("smoke test", () => {
    render(<App />, { wrapper: ThemeWrapper });
  });
});

这略微减少了测试代码。您也可以走创建自定义渲染函数的路线（按照redux的步骤）。

它可能看起来像

import React from "react";
import { render } from "@testing-library/react";
import { ThemeProvider } from "@chakra-ui/core/dist";

export const renderWithTheme = ui => {
  const Wrapper = ({ children }) => (
    <ThemeProvider>{children}</ThemeProvider>
  );

  return render(ui, { wrapper: Wrapper });
};

与上面的包装器基本相同，但更多地集成到测试渲染功能中。如果您需要传入主题对象或其他渲染选项，您也可以稍微调整函数签名，这只是一个简单的示例。

现在测试看起来像

import React from "react";
import { renderWithTheme } from "../testUtils";

import App from "./App";

describe("<App />", () => {
  test("smoke test", () => {
    renderWithTheme(<App />);
});

它可能的情况是，玩笑可能会被嘲笑的进口从@chakra-ui/core/dist（取决于你的笑话配置），这可能会导致您的进口轮的UI组件被未定义。

导入Theme Provider并在每次渲染时包装它可能是一种方法。当你有可能出现的问题的多个组件中的index.tsx。因此，您可能不想导入每个组件。

在这种情况下，您需要从@chakra-ui/core导入实际组件。

在 Jest 中这样做的最好方法（根据我的说法）是：

jest.mock("@chakra-ui/core", () => {
    const ui = jest.requireActual("@chakra-ui/core");
    return {
        ...ui,
        customKey: 'customValue',
    };
})

通过这种方式，您甚至可以向导入的module添加自定义函数和键值。