javascript - child 风格的组件在测试期间未提供正确的主题

我正在尝试编写一个将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道具，它确认提供的主题道具是一个空对象，而不是主题提供者的主题。有什么办法可以使用提供的主题mount？

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

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

软件包版本：styled-components为4.3.2，enzyme为3.10.0

最佳答案

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

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