Компонент в стиле энзимного рендеринга с темой

Я использую react с styled-components и jest enzyme для своих тестов. У меня проблемы с тестированием тематического компонента, который постоянно выдает ошибку из-за theme из 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. Как я могу передать тему моему компоненту?


reactjs jestjs styled-components enzyme
person Dispix    schedule 13.02.2017    source источник
comment
Вы нашли решение своей проблемы?   -  person rels    schedule 13.03.2017
comment
Вы когда-нибудь решали эту проблему?   -  person DavidWorldpeace    schedule 29.01.2018
comment
Привет и извините за долгую задержку! Тем временем появились компоненты в стиле шутки с некоторыми утилитами. Что они рекомендуют для темы, так это просто передавать ее в качестве реквизита. Вы также можете создать оболочку вокруг метода shallow из jest, чтобы делать это автоматически. (Источник)   -  person Dispix    schedule 01.02.2018

Ответы (2)


arrow_upward
0
arrow_downward

Я решаю эту проблему, создавая вспомогательную функцию обходного пути. у меня есть объект тем, который содержит темную и светлую тему:

    const CHANNEL = '__styled-components__';
    const broadcast = createBroadcast(themes.dark);

    const nodeWithThemeProp = node => {
      return React.cloneElement(node, { [CHANNEL]: broadcast.subscribe });
    };

    export function mountWithTheme(node, { context, childContextTypes } = {}) {
      return mount(
        nodeWithThemeProp(node),
        {
          context: Object.assign({}, context, {[CHANNEL]: broadcast.subscribe}),
          childContextTypes: Object.assign({}, {[CHANNEL]: createBroadcast(themes.dark).publish}, childContextTypes)
        }
      );
    }

теперь я могу получить состояние компонента-оболочки, и тема предустановлена: mountWithTheme(<Component {...props} />)

person chuaner    schedule 29.03.2017
comment
Привет, спасибо за ответ, а где вы импортируете createBroadcast? - person JimmyLv; 08.08.2017
comment
импортировать createBroadcast из '../../node_modules/styled-components/lib/utils/create-broadcast'; @JimmyLv извините, не проверял - person chuaner; 28.12.2017

arrow_upward
-1
arrow_downward

Учитывая это...

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

...и эта ошибка...

TypeError: Cannot read property 'main' of undefined

... мне кажется, что props.theme действительно существует внутри стилизованного компонента, но тема не имеет свойства colors. Я бы посмотрел либо на определение темы, либо на настройку ThemeProvider для источника проблемы.

person Tinynumbers    schedule 04.03.2017