酶渲染风格的组件与主题

Question

我使用react带styled-components,并jest enzyme为我的测试.我正在测试由于themefrom 而导致错误的主题组件的麻烦styled-components.

我的组件是:

const Wrapper = styled.header`
  position: fixed;
  top: 0;
  left: 0;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;

  width: 100%;
  height: 64px;

  background-color: ${({ theme }) => theme.colors.main.default};
  color: ${({ theme }) => theme.colors.main.text};
`

我的测试是:

it('should render a <header> tag', () => {
  const renderedComponent = shallow(<Wrapper />)
  expect(renderedComponent.type()).toEqual('header')
})

Jest给了我这个错误:

<Wrapper /> › should render a <header> tag

    TypeError: Cannot read property 'main' of undefined

      at Object.<anonymous>._styledComponents2.default.header.theme (app/containers/AppBar/Wrapper.js:13:182)

基本上,它会抛出一个错误,因为theme它是未定义的,因此它无法读取其中的colors属性.如何将主题传递给我的组件？

Answer 1

鉴于这种...

${({ theme }) => theme.colors.main.default};

...以及这个错误...

TypeError: Cannot read property 'main' of undefined

...在我看来，样式组件中props.theme 确实存在，但主题没有属性colors。我会查看主题定义或ThemeProvider问题的根源设置。