Reactjs 使用Jest对Chakra UI进行单元测试

目前，我正在尝试对我的应用程序进行单元测试，该应用程序是用带有typescript的CreateReact应用程序构建的，并且是用chakraui设计的。Chakrui包含一个组件ThemeProvider，它必须将整个应用程序包装成这样

这是我的index.tsx文件

从“React”导入React；
从“react dom”导入react dom；
导入“/index.css”；
从“/App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
从“@chakra ui/core/dist”导入{ThemeProvider，CSSReset}”；
从“@chakra ui/core/dist”导入{theme}”；
ReactDOM.render(
,
getElementById（“root”）

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

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

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

从“React”导入React；
从“@chakra ui/core/dist”导入{ThemeProvider}”；
export const ThemeWrapper=（{children}）=>(
{儿童}
);

然后在测试中指定包装器

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 });
  });
});

从“React”导入React；
从“@testing library/react”导入{render}”；
从“./testUtils”导入{ThemeWrapper}；
从“/App”导入应用程序；
描述（“）

它可能看起来像

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 });
};

从“React”导入React；
从“@testing library/react”导入{render}”；
从“@chakra ui/core/dist”导入{ThemeProvider}”；
导出常量renderWithTheme=ui=>{
常量包装器=（{children}）=>(
{儿童}
);
返回render（ui，{wrapper:wrapper}）；
};

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

现在测试看起来像

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

import App from "./App";

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

从“React”导入React；
从“./testUtils”导入{renderWithTheme}；
从“/App”导入应用程序；
描述（“，（）=>{
测试（“烟雾测试”，（）=>{
renderWithTheme（）；
});
可能是Jest模仿您从
@chakra ui/core/dist
（取决于您的）导入的内容，这可能导致导入的chakra ui组件未定义

导入主题提供程序并每次使用渲染将其包装可能是一种方法。当
索引.tsx中有多个组件时，可能会出现问题。因此，您可能不希望导入每个组件

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

（根据我的说法）开玩笑的最好方式是：

jest.mock（“@chakra ui/core”，（）=>{
const ui=jest.requirectual（“@chakra ui/core”）；
返回{
…用户界面，
customKey:“customValue”，
};
})

这样，您甚至可以向导入的模块添加自定义函数和键值。
Woah！这太棒了。renderWithTheme中的ui道具用于什么？@RedSkyHarbor这不是道具，而是正在呈现/测试的组件，只是在测试文档中遵循了redux的名称约定。