테마로 효소 렌더링 된 스타일의 구성 요소

을 styled-components으로, jestenzyme을 내 테스트에 사용하고 있습니다. themestyled-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}; 
`

내 시험은 다음과 같습니다 theme 그렇게 정의하기 때문에

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

기본적으로,이 오류가 발생합니다 :

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

농담이 날이 오류를 제공합니다 그 안에 colors 속성을 읽을 수 없습니다. 내 구성 요소에 테마를 전달하려면 어떻게해야합니까?

출처

2017-02-13 Dispix

당신은 당신의 문제에 대한 해결책을 찾았나요 난 테마 어둡고 밝은 테마를 포함하는 객체있어? – rels

이 문제를 해결 했습니까? – DavidWorldpeace

안녕하세요, 오랜 지연에 대해 사과드립니다. 그 동안 농담조 스타일의 구성 요소가 몇 가지 유틸리티로 나왔습니다. 테마로 추천하는 것은 단순히 소품으로 전달하는 것입니다. 당신은 또한 자동으로 그렇게하기 위해 jest에서'shallow' 메쏘드 주위에 래퍼를 만들 수 있습니다. ([Source] (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) 
     } 
    ); 
    }

지금 내가 래퍼 구성 요소의 상태를 얻을 수 있습니다 및 테마 미리 조정한다 : mountWithTheme(<Component {...props} />)

출처

2017-03-29 15:23:25

안녕하세요, 답변 해 주시고 어디에서 createBroadcast를 가져 오나요? – JimmyLv

'../../node_modules/styled-components/lib/utils/create-broadcast'에서 createBroadcast 가져 오기; @JimmyLv 죄송합니다. 이것을 확인하지 않았습니다. –

테마로 효소 렌더링 된 스타일의 구성 요소

답변

관련 문제