किसी एचओसी द्वारा लिपटे घोंसला वाले प्रतिक्रिया घटक पर राज्य कैसे पहुंचता है?

मैं Enzyme का उपयोग कर रहा हूं, और हम वास्तव में मेरे प्रश्न के आधार के रूप में दस्तावेज़ों में दिए गए example घटक का उपयोग कर सकते हैं।किसी एचओसी द्वारा लिपटे घोंसला वाले प्रतिक्रिया घटक पर राज्य कैसे पहुंचता है?

के इस <Foo /> घटक ReactRouter से एक <Link> घटक का उपयोग करता है और इस तरह हम परीक्षण के लिए एक <MemoryRouter> में लपेट की जरूरत है मान लेते हैं।

यहां समस्या है।

it('puts the lotion in the basket',() => { 
    const wrapper = mount(
    <MemoryRouter> 
     <Foo /> 
    </MemoryRouter> 
) 

    wrapper.state('name') // this returns null! We are accessing the MemoryRouter's state, which isn't what we want! 
    wrapper.find(Foo).state('name') // this breaks! state() can only be called on the root! 
})

तो, वास्तव में यकीन है कि जब <MemoryRouter> का उपयोग कर कैसे स्थानीय घटक राज्य तक पहुँचने के लिए नहीं।

शायद मैं एक अज्ञानी परीक्षण कर रहा हूं? परीक्षण में घटक स्थिति खराब अभ्यास प्राप्त करने/सेट करने की कोशिश कर रहा है? मैं कल्पना नहीं कर सकता, क्योंकि एंजाइम में घटक स्थिति प्राप्त करने/स्थापित करने के तरीके हैं।

बस यह सुनिश्चित न करें कि किसी को <MemoryRouter> में लिपटे घटक के आंतरिक भाग तक कैसे पहुंचाया जाए।

किसी भी मदद की सराहना की जाएगी!

स्रोत

2017-07-07 indiesquidge

संबंधित: https://stackoverflow.com/questions/42245215/how-to-test-child घटक-विधि-साथ-एंजाइम – indiesquidge

तो ऐसा लगता है कि एंजाइम के latest release के साथ बच्चे के घटक पर राज्य तक पहुंचने के इस मुद्दे के लिए एक संभावित फिक्स है।

मान लीजिए कि हम <Foo> है

class Foo extends Component { 
    state = { 
    bar: 'here is the state!' 
    } 

    render() { 
    return (
     <Link to='/'>Here is a link</Link> 
    ) 
    } 
}

नोट (प्रतिक्रिया रूटर के <Link> के उपयोग पर ध्यान दें) करते हैं: निम्नलिखित कोड एनजाइम v3 में ही उपलब्ध है।

परीक्षण कोड रिविजिटिंग, अब हम निम्नलिखित

it('puts the lotion in the basket',() => { 
    const wrapper = mount(
    <MemoryRouter> 
     <Foo /> 
    </MemoryRouter> 
) 

    expect(wrapper.find(Foo).instance().state).toEqual({ 
    bar: 'here is the state!' 
    }) 
})

wrapper.find(Child).instance() इस्तेमाल करते हुए हम Child के राज्य का उपयोग करने में सक्षम हैं, भले ही यह एक नेस्टेड घटक है लिखने के लिए सक्षम हैं। पिछले एंजाइम संस्करणों में हम रूट पर केवल instance तक पहुंच सकते थे। आप फ़ंक्शन को Child रैपर पर भी कॉल कर सकते हैं!

हम अपने उथले गाया परीक्षण के साथ एक समान पैटर्न का उपयोग कर सकते हैं

it('puts the lotion in the basket shallowly',() => { 
    const wrapper = shallow(
    <MemoryRouter> 
     <Foo /> 
    </MemoryRouter> 
) 

    expect(wrapper.find(Foo).dive().instance().state).toEqual({ 
    bar: 'here is the state!' 
    }) 
})

नोट उथले परीक्षण में dive का उपयोग करते हैं, जो एक एकल, गैर डोम नोड पर चलाया जा सकता है, और नोड वापस आ जाएगी उथले-प्रस्तुत।

Refs:

स्रोत

2017-11-15 23:18:52 indiesquidge

किसी एचओसी द्वारा लिपटे घोंसला वाले प्रतिक्रिया घटक पर राज्य कैसे पहुंचता है?

उत्तर

संबंधित मुद्दे