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

Я использую 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. Как передать тему моему компоненту?

источник

2017-02-13 Dispix

ли вы найти решение вашей проблемы? – rels

Вы когда-нибудь решали эту проблему? – DavidWorldpeace

Привет и извините за долгую задержку! Тем временем шумовые компоненты вышли с некоторыми утилитами. То, что они рекомендуют для темы, просто передает ее в качестве опоры. Вы также можете создать обертку вокруг метода «мелкий» из шутки, чтобы сделать это автоматически. ([Источник] (https://github.com/styled-components/jest-styled-components#theming)) – Dispix

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

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

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

TypeError: Cannot read property 'main' of undefined

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

источник

2017-03-04 00:32:28 Tinynumbers

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

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

источник

2017-03-29 15:23:25

Привет, Спасибо за ответ и где вы импортируете createBroadcast? – JimmyLv

import createBroadcast from '../../node_modules/styled-components/lib/utils/create-broadcast'; @JimmyLv извините, не проверял это –

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

ответ

Смежные вопросы