javascript - 测试期间未为子样式组件提供正确的主题

Question

我正在尝试写一个 mount(<MyComponent />)但我遇到了 styled-components 的问题由 MyComponent 呈现

子组件

const Layout = styled.View`
  background-color: ${({ theme }) => theme.background.main};
`

测试组件

const MyComponent = () => (
  <Modal visible>
    <Layout>
      ...
    </Layout>
  </Modal>
)

我的测试

const theme = {
  background: {
    main: '#fff',
  },
}

it ('should mount', () => {
  mount(
    <ThemeProvider theme={theme}>
      <MyComponent />
    </ThemeProvider>
  )
})

当我运行这个测试时，我得到一个错误 Cannot read property 'main' of undefined

我试图通过控制台记录 theme来自 Layout 的 Prop 组件，它确认提供的主题 Prop 是一个空对象，而不是来自主题提供者的主题。有什么办法可以mount使用提供的主题？

我也尝试过使用组件包装器，但结果保持不变

mount(<MyComponent />, {
  wrappingComponent: ThemeProvider,
  wrappingComponentProps: {
    theme,
  },
})

软件包版本:styled-components是 4.3.2，enzyme是3.10.0

Answer 1

您的代码有一点错误。查看测试中的 theme 对象。

它具有属性 backgroundColor 但在您的代码中您使用属性 theme.background