React 测试库和样式组件 - 无法读取未定义的属性

Question

我尝试在我的项目中使用反应测试库，但它对将主题传递给道具中的样式组件不满意，并且我收到此错误：“TypeError：无法读取未定义的属性”。完整的错误消息如下所示。

这是我正在测试的组件（一个非常简单的组件，因为我试图检查测试库是否正常工作）：

import React from "react";
import styled from "styled-components/macro";
import { rem } from "polished";
import DoneIcon from "@mui/icons-material/Done";

const Flag = styled.div`
  background-color: ${(props) => props.theme.colors.primary};
  font-size: ${rem("14px")};
  display: inline-flex;
  align-items: center;
  height: 32px;
  border-radius: 16px;
  padding: 0 12px 0 8px;
  margin-bottom: ${rem("16px")};
  color: #ffffff;
`;

const StyledDoneIcon = styled(DoneIcon)`
  margin-right: 4px;
`;

const CompletionFlag = (props) => {
  console.log("props: ", props);
  return (
    <Flag>
      <StyledDoneIcon />
      <span>Complete</span>
    </Flag>
  );
};

export default CompletionFlag;

这是失败的测试（我还没有编写完整的测试，因为渲染抛出错误）：

import { render } from "../../../test-utils/testing-library-utils";
import CompletionFlag from "../CompletionFlag";

test("check text in completion flag", () => {
  render(<CompletionFlag />);
});

这是我从测试库文档中获取的自定义渲染：

import React from "react";
import { render } from "@testing-library/react";
import { ThemeProvider } from "@mui/material/styles";
import { theme } from "../global-styles/global";

const AllTheProviders = ({ children }) => {
  console.log("theme: ", theme);
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};

const customRender = (ui, options) =>
  render(ui, { wrapper: AllTheProviders, ...options });

export * from "@testing-library/react";

export { customRender as render };

可能没有必要，但作为参考，这就是我们在应用程序组件中实际使用主题的方式：

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { StyledEngineProvider } from "@mui/material/styles";
import { ThemeProvider } from "@mui/material/styles";

import { GlobalStyle, theme } from "./global-styles/global";
import Login from "./components/pages/Login";
import Home from "./components/pages/Home";
import PageNotFound from "./components/pages/PageNotFound";
import { PrivateRoute } from "./components/organisms/PrivateRoute";

function App() {
  return (
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={theme}>
        <GlobalStyle />
        <BrowserRouter
          basename={
            process.env.REACT_APP_ENVIRONMENT === "development"
              ? "/"
              : process.env.PUBLIC_URL
          }
        >
          <Routes>
            <Route path="/login" element={<Login />} />
            <Route path="/" element={<PrivateRoute />}>
              <Route path="/:collectionId/home" element={<Home />} />
              <Route path="/*" element={<PageNotFound />} />
              <Route path="*" element={<PageNotFound />} />
            </Route>
          </Routes>
        </BrowserRouter>
      </ThemeProvider>
    </StyledEngineProvider>
  );
}

export default App;

任何帮助将不胜感激，因为我的谷歌搜索到目前为止还没有帮助。

Answer 1

您应该尝试将单元测试中的 CompletionFlag 组件包装到 ThemeProvider 中并为其提供主题

import { render } from "../../../test-utils/testing-library-utils";
import CompletionFlag from "../CompletionFlag";
import { ThemeProvider } from "@mui/material/styles";
import { theme } from "../global-styles/global";

test("check text in completion flag", () => {
  render(
    <ThemeProvider theme={theme}>
      <CompletionFlag />
    </ThemeProvider>
    );
});

Answer 2

我今天也遇到了这个问题并解决了。所以问题是导入错误。 进口必须

import { render } from "../../../test-utils";

而不是

import { render } from "../../../test-utils/testing-library-utils";

最后一个再次采用 RTL 的默认功能。我们的自定义“代理”渲染不起作用。 就我而言，错误是由于自动导入而引起的...... 另外我建议您导入绝对路径（而不是相对路径）

Answer 3

我认为主题对象中缺少颜色属性。您是否检查过主题对象是否存在颜色。要消除此错误，您可以执行这样的条件检查。

background-color: ${(props) => props.theme.colors?.primary};