Question

当前，我正在尝试对使用带有Typescript的Create-React-App构建的应用程序进行单元测试，并使用chakraui对其进行样式设置。 Chakrui包含一个组件ThemeProvider，它必须像这样包装整个应用程序。

这是我的index.tsx文件

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { ThemeProvider, CSSReset } from "@chakra-ui/core/dist";
import { theme } from "@chakra-ui/core/dist";

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <CSSReset />
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById("root")

对于我编写的每个单元测试，我都必须使用ThemeProvider包装该组件以使测试通过：

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

import App from "./App";

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

但这非常冗长，必须针对我编写的每次测试进行。是否有一种方法可以在每个.test.tsx文件中仅执行一次？

Answer 1

您可以创建自己的主题包装器功能

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

Answer 2

在某些情况下，Jest可能会从@chakra-ui/core/dist（取决于您的jest configuration）模拟您的导入，这可能会导致您导入的chakra-ui组件成为未定义。

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

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

在Jest中这样做的最好方法是：

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

这样，您甚至可以将自定义功能和键值添加到导入的模块。

用Jest单元测试Chakra UI

2 个答案: