目前,我正在尝试对使用 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
中只执行一次文件?
最佳答案
您可以创建自己的主题包装函数
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 />);
});
关于reactjs - 使用 Jest 对 Chakra UI 进行单元测试,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63855604/