रिएक्ट और रेडक्स के साथ नेस्टेड कंटेनर वाले घटक का परीक्षण कैसे करें?

Question

आवेदन की जटिलता के कारण मैं काम कर रहा हूं, मैंने बाल घटकों के अनुपात के रूप में एक क्रिया पारित करने के बजाय नेस्टेड रेडक्स कंटेनर का उपयोग करने का निर्णय लिया है। हालांकि, यहके साथ के साथ mocha, chai और sinon के साथ संयोजन में यूनिट परीक्षण के लिए समस्याग्रस्त साबित हुआ है।

<OuterContainer> 
    <div> 
    <InnerContainer /> 
    </div> 
</OuterContainer> 

जहां OuterContainer & InnerContainer कनेक्ट के साथ लिपटे रहे हैं:

यहाँ दृश्य संरचना का एक काल्पनिक उदाहरण है। उदा .:

export connect(<mapStateToProps>)(<Component>)

जब चल परीक्षण त्रुटि मैं हो रही है: Invariant Violation: Could not find "store" in either the context or props of "Connect(Component)". Either wrap the root component in a `<Provider>`, or explicitly pass "store" as a prop to "Connect(Component)".

वहाँ खोलने या उथले प्रतिपादन का उपयोग किए बिना इकाई परीक्षण के लिए InnerContainer ठूंठ के लिए एक रास्ता है?

Answer 1

परीक्षण करते समय <Provider> में अपना घटक लपेटें। यह आपके ऊपर है कि वास्तविक स्टोर या { dispatch, getState, subscribe } के साथ एक नकली आपूर्ति करना है या नहीं। <Provider store={store}> में बाहरीतम घटक को लपेटने से दुकान को बच्चे के घटकों को घोंसले के किसी भी स्तर पर भी उपलब्ध कराया जाएगा-जैसे ऐप में ही।

const store = createStore(reducer) // can also be a mock 
ReactTestUtils.renderIntoDocument(
    <Provider store={store}> 
    <OuterContainer /> 
    </Provider> 
) 

Answer 2

एक और तरीका दोनों घटक को कनेक्टेड और कंटेनर निर्यात करने के लिए निर्यात करना है। निश्चित रूप से कंटेनर डिफ़ॉल्ट रूप से।

export const Comp = (props) => (<p>Whatever</p>) 
export default connect(...)(Comp) 

इसलिए, आप यूनिट परीक्षण Comp कर सकते हैं।

Answer 3

सुनिश्चित नहीं है कि आपकी समस्या क्या है, लेकिन मुझे यकीन है कि इससे शायद इस फ़ीड को देखने वाले कुछ लोगों की मदद मिलेगी।

मैं एक ही त्रुटि थी और यह आसानी से ठीक किया गया था:

मैं अपने घटक अपनी प्रविष्टि फ़ाइल में मेरी दुकान वस्तु पारित करने के लिए भूल गया था (webpack का उपयोग)।

मैं बस रूट घटक "दुकान = {दुकान}" के लिए एक विशेषता को जोड़ नीचे देखें:

document.addEventListener("DOMContentLoaded",() => { 
     const store = configureStore(); 
     ReactDOM.render(<Root store={store} />, 
    document.getElementById('content')); 
    }); 

यह रूप में अच्छी तरह के संदर्भ के लिए मेरी जड़ फ़ाइल कोड था:

import React from 'react'; 
    import { Provider } from 'react-redux'; 
    import App from './app'; 

    const Root = ({ store }) => (
    <Provider store={ store }> 
     <App /> 
    </Provider> 
    ); 

निर्यात डिफ़ॉल्ट रूट;

आशा है कि किसी की मदद करें!

Answer 4

बच्चे घटक को वापस करने के लिए Provider घटक नकल करें।

describe() से पहले इसे जोड़ें।

jest.mock('Provider',() => ({children}) => children);