小编Wil*_*ill的帖子

我正在尝试在我的项目中使用反应测试库，但它对将主题传递给道具中的样式组件不满意，并且我收到此错误：“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 …