स्टाइल घटक घटक के साथ जेस्ट प्रदाता

Question

मैं इस github project का जिक्र कर रहा हूं और मैं KeyPad.js घटक का एक सरल परीक्षण लिखने की कोशिश कर रहा हूं।

मैंने इस मामले पर खोले गए मुद्दों को देखा है और एक सुझाव दिया गया है कि विषय को घटक के रूप में थीम को पास करना है। यह समाधान एंजाइम के साथ काम नहीं करेगा।

मेरे मामले में समस्या यह है कि बच्चों के घटक थीमप्रोवाइडर के माध्यम से विषय प्राप्त करते हैं और परीक्षण कार्य करने में सक्षम होने के लिए मुझे सभी को थीम प्रोप जोड़ने की आवश्यकता होगी।

उदाहरण:

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

यदि आप प्रोप के साथ ऐसा नहीं करते हैं तो आप युग्मन घटक को दूसरी बाहरी पुस्तकालय में समाप्त कर देंगे। उदाहरण: रेडक्स या मोबक्स स्टोर। इसका मतलब है कि यह अब एक वास्तविक घटक नहीं है

भले ही यह भयानक लग रहा हो। यदि आप वास्तव में एक अलग घटक बनाना चाहते हैं तो यह जाने का तरीका है।

Answer 2

मैं केवल कॉलबैक के props तर्क को नष्ट कर दूंगा और theme के लिए डिफ़ॉल्ट मान जोड़ दूंगा। इस तरह, theme से आप किसी भी प्रोप तक पहुंच सकते हैं Cannot read property ... of undefined के साथ नहीं फेंकेंगे और undefined वापस आ जाएंगे। यह आपकी शैलियों को गड़बड़ कर देगा लेकिन मुझे नहीं लगता कि आप अपने यूनिट परीक्षणों में इसके बारे में बहुत अधिक परवाह करते हैं।

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