9

、およびテストに使用reactしています。fromが原因でエラーが発生し続けるテーマ コンポーネントのテストに問題があります。styled-componentsjest enzymethemestyled-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コンポーネントにテーマを渡すにはどうすればよいですか?

4

2 に答える 2