अपरिवर्तनीय उल्लंघन: "स्टोर" नहीं ढूंढा जा सका या तो संदर्भ या के रंगमंच की सामग्री "कनेक्ट (SportsDatabase)"

Question

पूर्ण यहाँ कोड में: https://gist.github.com/js08/0ec3d70dfda76d7e9fb4

हाय,

• मैं एक आवेदन जहां यह है निर्माण पर्यावरण के आधार पर डेस्कटॉप और मोबाइल के लिए विभिन्न टेम्पलेट दिखाता है।
• मैं इसे विकसित करने में सफलतापूर्वक सक्षम हूं जहां मुझे अपने मोबाइल टेम्पलेट के लिए नेविगेशन मेनू को छिपाने की आवश्यकता है।
• अभी मैं एक परीक्षण का मामला है, जहां यह proptypes के माध्यम से सभी मूल्यों को हासिल करेगा और सही ढंग से renders
• लेकिन यकीन है कि कैसे इकाई परीक्षण मामलों लिखने के लिए अपने मोबाइल यह एनएवी घटक प्रस्तुत करना नहीं होना चाहिए जब लिख नहीं कर रहा हूँ।
• मैंने कोशिश की लेकिन मुझे एक त्रुटि का सामना करना पड़ रहा है ... क्या आप मुझे बता सकते हैं कि इसे कैसे ठीक किया जाए।
• नीचे कोड साबित करना।

टेस्ट मामले

import {expect} from 'chai'; 
import React from 'react'; 
import TestUtils from 'react-addons-test-utils'; 
import {SportsTopPortion} from '../../../src/components/sports-top-portion/sports-top-portion.jsx'; 
require('../../test-utils/dom'); 


describe('"sports-top-portion" Unit Tests', function() { 
    let shallowRenderer = TestUtils.createRenderer(); 

    let sportsContentContainerLayout ='mobile'; 
    let sportsContentContainerProfile = {'exists': 'hasSidebar'}; 
    let sportsContentContainerAuthExchange = {hasValidAccessToken: true}; 
    let sportsContentContainerHasValidAccessToken ='test'; 

    it('should render correctly',() => { 
     shallowRenderer.render(<SportsTopPortion sportsWholeFramework={sportsContentContainerLayout} sportsPlayers={sportsContentContainerProfile} sportsAuthentication={sportsContentContainerAuthExchange} sportsUpperBar={{activeSportsLink:'test'}} />); 
     //shallowRenderer.render(<SportsTopPortion sportsWholeFramework={sportsContentContainerLayout} sportsPlayers={sportsContentContainerProfile} hasValidAccessToken={sportsContentContainerHasValidAccessToken} />); 

     let renderedElement = shallowRenderer.getRenderOutput(); 
     console.log("renderedElement------->" + JSON.stringify(renderedElement)); 

     expect(renderedElement).to.exist; 
    }); 

    it('should not render sportsNavigationComponent when sports.build is mobile',() => { 
     let sportsNavigationComponent = TestUtils.renderIntoDocument(<SportsTopPortion sportsWholeFramework={sportsContentContainerLayout} sportsPlayers={sportsContentContainerProfile} sportsAuthentication={sportsContentContainerAuthExchange} sportsUpperBar={{activeSportsLink:'test'}} />); 
     console.log("sportsNavigationComponent------->" + JSON.stringify(sportsNavigationComponent)); 

     //let footnoteContainer = TestUtils.findRenderedDOMComponentWithClass(sportsNavigationComponent, 'linkPack--standard'); 

     //expect(footnoteContainer).to.exist; 
    }); 

}); 

कोड स्निपेट जहां परीक्षण का मामला जरूरत

if (sports.build === 'mobile') { 
    sportsNavigationComponent = <div />; 
    sportsSideMEnu = <div />; 
    searchComponent = <div />; 
    sportsPlayersWidget = <div />; 
} 

त्रुटि

1) "sports-top-portion" Unit Tests should not render sportsNavigationComponent when sports.build is mobile: 
    Invariant Violation: Could not find "store" in either the context or props of "Connect(SportsDatabase)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(SportsDatabase)". 
     at Object.invariant [as default] (C:\sports-whole-page\node_modules\invariant\invariant.js:42:15) 
     at new Connect (C:\sports-whole-page\node_modules\react-redux\lib\components\createConnect.js:135:33) 
     at [object Object].ReactCompositeComponentMixin.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactCompositeComponent.js:148:18) 
     at [object Object].wrapper [as mountComponent] (C:\sports-whole-page\node_modules\react\lib\ReactPerf.js:66:21) 
     at Object.ReactReconciler.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactReconciler.js:37:35) 
     at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (C:\sports-whole-page\node_modules\react\lib\ReactMultiChild.js:241:44) 
     at ReactDOMComponent.Mixin._createContentMarkup (C:\sports-whole-page\node_modules\react\lib\ReactDOMComponent.js:591:32) 
     at ReactDOMComponent.Mixin.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactDOMComponent.js:479:29) 
     at Object.ReactReconciler.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactReconciler.js:37:35) 
     at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (C:\sports-whole-page\node_modules\react\lib\ReactMultiChild.js:241:44) 
     at ReactDOMComponent.Mixin._createContentMarkup (C:\sports-whole-page\node_modules\react\lib\ReactDOMComponent.js:591:32) 
     at ReactDOMComponent.Mixin.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactDOMComponent.js:479:29) 
     at Object.ReactReconciler.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactReconciler.js:37:35) 
     at [object Object].ReactCompositeComponentMixin.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactCompositeComponent.js:225:34) 
     at [object Object].wrapper [as mountComponent] (C:\sports-whole-page\node_modules\react\lib\ReactPerf.js:66:21) 
     at Object.ReactReconciler.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactReconciler.js:37:35) 
     at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (C:\sports-whole-page\node_modules\react\lib\ReactMultiChild.js:241:44) 
     at ReactDOMComponent.Mixin._createContentMarkup (C:\sports-whole-page\node_modules\react\lib\ReactDOMComponent.js:591:32) 
     at ReactDOMComponent.Mixin.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactDOMComponent.js:479:29) 
     at Object.ReactReconciler.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactReconciler.js:37:35) 
     at [object Object].ReactCompositeComponentMixin.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactCompositeComponent.js:225:34) 
     at [object Object].wrapper [as mountComponent] (C:\sports-whole-page\node_modules\react\lib\ReactPerf.js:66:21) 
     at Object.ReactReconciler.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactReconciler.js:37:35) 
     at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (C:\sports-whole-page\node_modules\react\lib\ReactMultiChild.js:241:44) 
     at ReactDOMComponent.Mixin._createContentMarkup (C:\sports-whole-page\node_modules\react\lib\ReactDOMComponent.js:591:32) 
     at ReactDOMComponent.Mixin.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactDOMComponent.js:479:29) 
     at Object.ReactReconciler.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactReconciler.js:37:35) 
     at [object Object].ReactCompositeComponentMixin.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactCompositeComponent.js:225:34) 
     at [object Object].wrapper [as mountComponent] (C:\sports-whole-page\node_modules\react\lib\ReactPerf.js:66:21) 
     at Object.ReactReconciler.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactReconciler.js:37:35) 
     at [object Object].ReactCompositeComponentMixin.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactCompositeComponent.js:225:34) 
     at [object Object].wrapper [as mountComponent] (C:\sports-whole-page\node_modules\react\lib\ReactPerf.js:66:21) 
     at Object.ReactReconciler.mountComponent (C:\sports-whole-page\node_modules\react\lib\ReactReconciler.js:37:35) 
     at mountComponentIntoNode (C:\sports-whole-page\node_modules\react\lib\ReactMount.js:266:32) 
     at ReactReconcileTransaction.Mixin.perform (C:\sports-whole-page\node_modules\react\lib\Transaction.js:136:20) 
     at batchedMountComponentIntoNode (C:\sports-whole-page\node_modules\react\lib\ReactMount.js:282:15) 
     at ReactDefaultBatchingStrategyTransaction.Mixin.perform (C:\sports-whole-page\node_modules\react\lib\Transaction.js:136:20) 
     at Object.ReactDefaultBatchingStrategy.batchedUpdates (C:\sports-whole-page\node_modules\react\lib\ReactDefaultBatchingStrategy.js:62:19) 
     at Object.batchedUpdates (C:\sports-whole-page\node_modules\react\lib\ReactUpdates.js:94:20) 
     at Object.ReactMount._renderNewRootComponent (C:\sports-whole-page\node_modules\react\lib\ReactMount.js:476:18) 
     at Object.wrapper [as _renderNewRootComponent] (C:\sports-whole-page\node_modules\react\lib\ReactPerf.js:66:21) 
     at Object.ReactMount._renderSubtreeIntoContainer (C:\sports-whole-page\node_modules\react\lib\ReactMount.js:550:32) 
     at Object.ReactMount.render (C:\sports-whole-page\node_modules\react\lib\ReactMount.js:570:23) 
     at Object.wrapper [as render] (C:\sports-whole-page\node_modules\react\lib\ReactPerf.js:66:21) 
     at Object.ReactTestUtils.renderIntoDocument (C:\sports-whole-page\node_modules\react\lib\ReactTestUtils.js:76:21) 
     at Context.<anonymous> (C:/codebase/sports-whole-page/test/components/sports-top-portion/sports-top-portion-unit-tests.js:28:41) 
     at callFn (C:\sports-whole-page\node_modules\mocha\lib\runnable.js:286:21) 
     at Test.Runnable.run (C:\sports-whole-page\node_modules\mocha\lib\runnable.js:279:7) 
     at Runner.runTest (C:\sports-whole-page\node_modules\mocha\lib\runner.js:421:10) 
     at C:\sports-whole-page\node_modules\mocha\lib\runner.js:528:12 
     at next (C:\sports-whole-page\node_modules\mocha\lib\runner.js:341:14) 
     at C:\sports-whole-page\node_modules\mocha\lib\runner.js:351:7 
     at next (C:\sports-whole-page\node_modules\mocha\lib\runner.js:283:14) 
     at Immediate._onImmediate (C:\sports-whole-page\node_modules\mocha\lib\runner.js:319:5) 

Answer 1

यह बहुत आसान है लिखा होना चाहिए। आप connect()(MyPlainComponent) पर कॉल करके उत्पन्न रैपर घटक का परीक्षण करने का प्रयास कर रहे हैं। उस रैपर घटक को रेडक्स स्टोर तक पहुंच की उम्मीद है। आम तौर पर यह स्टोर context.store के रूप में उपलब्ध है, क्योंकि आपके घटक पदानुक्रम के शीर्ष पर आपके पास <Provider store={myStore} /> होगा। हालांकि, आप अपने कनेक्टेड घटक को स्वयं स्टोर नहीं कर रहे हैं, बिना किसी स्टोर के, इसलिए यह एक त्रुटि फेंक रहा है।

• अपने कनेक्ट किए गए घटक
• के चारों ओर एक स्टोर बनाएँ और प्रस्तुत करना एक <Provider> एक दुकान बनाएँ और सीधे, <MyConnectedComponent store={store} /> के रूप में यह में पारित जुड़ा घटक को भी स्वीकार करेंगे के रूप में:

  आपके पास कुछ विकल्प मिल गया है एक प्रोप

• के रूप में "स्टोर" कनेक्टेड घटक का परीक्षण परेशान न करें। "सादा", अनकनेक्टेड संस्करण निर्यात करें, और इसके बजाय परीक्षण करें। यदि आप अपने सादे घटक और mapStateToProps फ़ंक्शन का परीक्षण करते हैं, तो आप सुरक्षित रूप से अनुमान लगा सकते हैं कि कनेक्टेड संस्करण सही तरीके से काम करेगा।

शायद आप Redux दस्तावेज़ों में "परीक्षण" पृष्ठ के माध्यम से पढ़ना चाहते हैं: https://redux.js.org/recipes/writing-tests।

संपादित:

वास्तव में देखकर कि आप स्रोत तैनात, और त्रुटि संदेश फिर से पढ़ने के बाद, वास्तविक समस्या SportsTopPane घटक के साथ नहीं है। समस्या यह है कि आप स्पोर्ट्सटॉपपेंडर को "पूरी तरह से" प्रस्तुत करने की कोशिश कर रहे हैं, जो आपके पहले बच्चों में "उथले" प्रस्तुत करने के बजाए अपने सभी बच्चों को भी प्रस्तुत करता है। रेखा searchComponent = <SportsDatabase sportsWholeFramework="desktop" />; एक घटक प्रस्तुत कर रहा है जो मुझे लगता है कि यह भी जुड़ा हुआ है, और इसलिए एक दुकान को रिएक्ट की "संदर्भ" सुविधा में उपलब्ध होने की उम्मीद है।

इस बिंदु पर, आप दो नए विकल्प हैं:

• केवल "उथले" SportsTopPane का प्रतिपादन करते हैं, ताकि आप इसे मजबूर कर नहीं कर रहे हैं पूरी तरह से अपने बच्चों को प्रस्तुत करने के लिए
• आप करना चाहते हैं SportsTopPane की "गहरी" प्रतिपादन करें, आपको संदर्भ में एक Redux स्टोर प्रदान करने की आवश्यकता होगी। मैं अत्यधिक सुझाव देता हूं कि आप एंजाइम परीक्षण पुस्तकालय को देखें, जो आपको बिल्कुल ऐसा करने देता है। उदाहरण के लिए http://airbnb.io/enzyme/docs/api/ReactWrapper/setContext.html देखें।

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