Jest z elementami stylu themeProvider

Question

Mam na myśli to github project i staram się napisać prosty test komponentu KeyPad.js.

Widziałem problemy otwarte w tej sprawie, a jednym z sugerowanych rozwiązań jest przekazanie tematu jako wniosku do komponentu. To rozwiązanie nie działa z enzymem.

Problem w moim przypadku polega na tym, że komponenty potomne otrzymują motyw za pomocą ThemeProvider i aby móc sprawić, że test zadziała, będę musiał dodać motyw motywu dla wszystkich.

Przykład: renderowanie metoda

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

MANIPULATORACH zmieni tak, z motywem prop wszędzie

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

Nie lubię tego rozwiązania. Ktoś może mi w tym pomóc?

Dzięki

Answer 1

Jest to całkowicie uzasadnione, o ile mogłem zobaczyć. Każdy komponent w bibliotece ma rekwizyt motywu, dzięki czemu możesz ustawić go w ten sposób.

Na szczęście nie używa kontekstu, w przeciwnym razie byłbyś poza domem. dlaczego nie użyć kontekstu: https://reactjs.org/docs/context.html

Jeśli nie zrobisz tego z rekwizytami, zakończysz łączenie komponentu z inną biblioteką zewnętrzną. np .: Redux lub sklep mobx. Oznacza to, że nie jest już prawdziwym komponentem, nawet jeśli wygląda okropnie. to jest droga, jeśli naprawdę chcesz stworzyć oddzielny komponent.

Answer 2

Po prostu zniszczę argument wywołania zwrotnego props i dodaję domyślną wartość dla theme. W ten sposób dowolny rekwizyt, do którego możesz uzyskać dostęp z theme, nie zostanie wyrzucony z Cannot read property ... of undefined i zwróci undefined. To zepsuje twoje style, ale nie sądzę, że o to ci chodzi w testach jednostkowych.

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