Ферментный стальной компонент с темой

Question

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

Answer 1

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

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

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

TypeError: Cannot read property 'main' of undefined

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

Answer 2

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

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) 
     } 
    ); 
    } 

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