스타일이 지정된 구성 요소가있는 Jest themeProvider

Question

이 부분은 github project이고이 부분은 KeyPad.js이라는 간단한 테스트를 작성하려고합니다.

이 문제에 대해 열어 본 한 가지 해결책은 주제를 구성 요소로 전달하는 것입니다. 이 솔루션은 효소와 작동하지 않을 것입니다.

내 경우의 문제는 어린이 구성 요소가 ThemeProvider를 통해 테마를 수신하고 모든 테마에 소품을 추가해야하는 테스트 작업을 수행 할 수 있다는 것입니다.

예 :

const tree = renderer.create(
     <KeyPad 
      theme={theme} 
      cancel={()=> true} 
      confirm={()=> true}    
      validation={()=> true} 
      keyValid={()=>true} /> 
    ).toJSON(); 
     expect(tree).toMatchSnapshot(); 

, 키패드의 렌더링 방법은 다음과 같이 변경 주제로 나는이 솔루션을 같이하지을 사방

render() { 
     let { displayRule, validation, label, confirm, cancel, theme, keyValid, dateFormat } = this.props 
     return (
      <Container theme={theme}> 
       <Content theme={theme}> 
        <Header theme={theme}> 
         <CancelButton theme={theme} onClick={cancel}> 
          <MdCancel /> 
         </CancelButton> 
         <Label>{label}</Label> 
         <ConfirmButton theme={theme} onClick={() => confirm(this.state.input)} disabled={!validation(this.state.input)}> 
          <MdCheck /> 
         </ConfirmButton> 
        </Header> 
        <Display 
         theme={theme} 
         value={this.state.input} 
         displayRule={displayRule} 
         dateFormat={dateFormat} 
         cancel={this.cancelLastInsert} /> 
        <Keys> 
         {[7, 8, 9, 4, 5, 6, 1, 2, 3, '-', 0, '.'].map(key => (
          <Button 
           theme={theme} 
           key={`button-${key}`} 
           theme={theme} 
           click={(key) => this.handleClick(key) } 
           value={key} 
           disabled={!keyValid(this.state.input, key, dateFormat)} /> 
         ))} 
        </Keys> 
       </Content> 
      </Container> 
     )  
    } 

소품 것이다. 아무도 이걸 도와 줄 수 없나요?

감사합니다.

Answer 1

이것은 내가 알 수있는 한 완전히 합리적입니다. 라이브러리의 모든 구성 요소에는 테마 소품이 있으므로 이와 같이 설정할 수 있습니다.

운 좋게도 문맥을 사용하지 않으면 집에서 멀리 떨어져있게됩니다. 컨텍스트를 사용하지 않는 이유는 무엇입니까? https://reactjs.org/docs/context.html

소품을 사용하지 않으면 구성 요소를 다른 외부 라이브러리에 연결하게됩니다. 예 : Redux 또는 mobx 저장소. 즉, 더 이상 참된 구성 요소가 아닙니다. 끔찍한 것처럼 보이더라도 더 이상 실제 구성 요소가 아닙니다.

진정으로 분리 된 구성 요소를 만들고 싶다면 갈 길이 멀다.

Answer 2

콜백의 props 인수를 제거하고 기본값을 theme에 추가합니다. 이렇게하면 theme에서 액세스 할 수있는 모든 소품은 Cannot read property ... of undefined과 함께 전달되지 않으며 undefined을 반환합니다. 그것은 당신의 스타일을 망칠 것입니다. 그러나 당신이 당신의 단위 테스트에서 그렇게 많이 신경 쓰지 않는다고 생각합니다.

... 
color: ${({ theme = {} }) => theme.background}; 
...