スタイル付きコンポーネントを使ったJest themeProvider

Question

私はこれをgithub projectといい、KeyPad.jsコンポーネントの簡単なテストを書こうとしています。

私はこの問題について開かれた問題を見ており、解決策の1つとしてコンポーネントをpropとしてテーマを渡すことをお勧めします。この解決策は酵素では機能しない。

私の場合の問題は、子コンポーネントがThemeProviderを通じてテーマを受け取って、テーマのpropをallに追加する必要があるテスト作業を行うことができることです。

例：

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

キーパッドのrenderメソッドは、次のように変更するテーマで、私はこのソリューションのようではないを行うどこでも

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