使用Theme的Styled Components单元测试抛出TypeError问题咨询

• styled-components 的主题值通过ThemeProvider的上下文（Context）注入，不是通过给业务组件传递theme属性生效。你在测试代码的setUp函数中直接给<Header />传theme属性，Header组件本身没有接收也没有向下转发该属性，内部引用的Container等样式组件无法拿到主题值，导致props.theme为undefined，读取primary1属性时报错。
• 你贴出的报错来自Button/spec.js文件，说明Button组件的单元测试存在相同问题：测试时没有用ThemeProvider包裹待测试组件，导致样式组件读取不到主题值。
• 你现有测试中单独测试Container的用例可以正常执行，是因为调用了你封装的renderWithTheme工具，已经自动套了ThemeProvider上下文。

修复Header组件测试 #

修改spec.js中的setUp函数，给shallow渲染配置包裹组件注入主题：

// 首先在spec.js顶部导入ThemeProvider
import { ThemeProvider } from "styled-components";

const setUp = (props = {}) => {
  const component = shallow(<Header {...props} />, {
    // 配置enzyme shallow的包裹组件，注入ThemeProvider上下文
    wrappingComponent: ThemeProvider,
    wrappingComponentProps: {
      theme: theme
    }
  });
  return component;
};

如果不需要用到enzyme的shallow能力，也可以直接用你已经封装好的renderWithTheme工具渲染Header组件。

修复Button组件测试 #

所有使用了主题的styled组件、或者内部引用了styled组件的业务组件，测试时都需要用ThemeProvider包裹，你可以直接复用现有renderWithTheme工具：

// Button组件测试示例
import { renderWithTheme } from "../../../utils/utils";
import Button from "./Button";

it("Button渲染正常", () => {
  const tree = renderWithTheme(<Button>测试按钮</Button>).toJSON();
  expect(tree).toMatchSnapshot();
});

内容的提问来源于stack exchange，提问作者user14467240