Invariant Violation: Could not find “store” in either the context or props of “Connect(SportsDatabase)”

Full code here: https://gist.github.com/js08/0ec3d70dfda76d7e9fb4

Hi,

  • I have an application where it shows different templates for desktop and mobile on basis of build environment.
  • I am successfully able to develop it where I need to hide the navigation menu for my mobile template.
  • right now I am able to write one test case where it fetches all the values through the proptypes and renders correctly
  • but not sure how to write the unit test cases when its mobile it should not render nav component.
  • I tried but I am facing an error…can you tell me how to fix it.
  • provding code below.

Test case

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

});

Code snippet where test case need to be written

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

Error

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 [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)

Related Posts:

  1. What is mapDispatchToProps?
  2. What is localhost 3000?
  3. What is localhost 3000?
  4. MenuIcon not found in material-ui/icons
  5. How To Add My Own Svg Image Just Like Logo Is Shown By Default In Create-React-App
  6. Error : Cannot read property ‘map’ of undefined
  7. Error : Cannot read property ‘map’ of undefined
  8. When to use componentWillReceiveProps lifecycle method?
  9. How do I reference a local image in React?
  10. How to use clsx in React
  11. How to use clsx in React
  12. how to delete a single item using axios in react
  13. Understanding React-Redux and mapStateToProps()
  14. Understanding the React Hooks ‘exhaustive-deps’ lint rule
  15. Error: ‘node-sass’ version 5.0.0 is incompatible with ^4.0.0
  16. Console.log() isn’t logging in ReactJS
  17. Reactjs this.setState is not a function error
  18. Axios having CORS issue
  19. How to fix missing dependency warning when using useEffect React Hook
  20. When to use React setState callback
  21. What exactly is the ‘react-scripts start’ command?
  22. Adding an .env file to React Project
  23. react-scripts: command not found
  24. Component definition is missing display name react/display-name
  25. What is withRouter for in react-router-dom?
  26. React Context vs React Redux, when should I use each one?
  27. How to include bootstrap css and js in reactjs app?
  28. When to use useImperativeHandle, useLayoutEffect, and useDebugValue
  29. What does this “react-scripts eject” command do?
  30. React-Redux: Actions must be plain objects. Use custom middleware for async actions
  31. React – expressions must have one parent element?
  32. Can you force a React component to rerender without calling setState?
  33. Fetching JSON returns error Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 and status code 304: Not Modified
  34. Is using async componentDidMount() good?
  35. Support for the experimental syntax ‘classProperties’ isn’t currently enabled
  36. Inserting the iframe into react component
  37. How to use callback with useState hook in react
  38. How to use callback with useState hook in react
  39. How to resolve “Cannot use import statement outside a module” in jest
  40. Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
  41. How to use switch statement inside a React component?
  42. How to use onClick event on react Link component?
  43. forEach() in React JSX does not output any HTML
  44. Scroll to the top of the page after render in react.js
  45. What does “isomorphic React” mean?
  46. axios post request to send form data
  47. How to declare a global variable in React?
  48. Why use Redux over Facebook Flux?
  49. How to use onload in react?
  50. Local package.json exists, but node_modules missing
  51. Why am I getting Warning: Functions are not valid as a React child?
  52. Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
  53. What is the difference between .ts and .tsx extensions. Both are used as extensions for typescript files in react. So where should we use them?
  54. This.props.dispatch not a function – React-Redux
  55. webpackJsonp is not defined
  56. How to set a default value in react-select
  57. Invalid Host Header when ngrok tries to connect to React dev server
  58. ReactNative: how to center text?
  59. How do I avoid ‘Function components cannot be given refs’ when using react-router-dom?
  60. react-router vs react-router-dom, when to use one or the other?
  61. React Props is Not Defined
  62. ReactJs CreateClass is not a function
  63. onKeyDown event not working on divs in React
  64. React.createElement: type is invalid — expected a string
  65. Read the current full URL with React?
  66. ‘React’ must be in scope when using JSX react/react-in-jsx-scope?
  67. Show or hide element in React
  68. React statics with ES6 classes
  69. componentDidMount() not being called when react component is mounted
  70. Await is a reserved word error inside async function
  71. “SyntaxError: Unexpected token < in JSON at position 0"
  72. Invariant Violation: Objects are not valid as a React child
  73. Understanding unique keys for array children in React.js
  74. Difference between npx and npm?
  75. Loop inside React JSX
  76. Can’t resolve module (not found) in React.js
  77. React this.setState is not a function
  78. In reactJS, how to copy text to clipboard?
  79. SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag
  80. Setting a backgroundImage With React Inline Styles
  81. React Navigation back() and goBack() not working
  82. How to import image (.svg, .png ) in a React Component
  83. Uncaught TypeError: Cannot read property ‘props’ of null
  84. How to handle the `onKeyPress` event in ReactJS?
  85. Failed to compile. Module not found: Can’t resolve ‘react-router-dom’
  86. What does “export default” do in JSX?
  87. React.js – Can’t read property of undefined
  88. React’s setState method with prevState argument
  89. Uncaught TypeError: Cannot read property ‘call’ of undefined at __webpack_require__
  90. How to clear react-native cache?
  91. Async/await in componentDidMount to load in correct order
  92. React-Router : What is the purpose of IndexRoute?
  93. React router not showing browser history
  94. command not found: jest
  95. ReactJS – .JS vs .JSX
  96. ReactJS: Maximum update depth exceeded error
  97. React, Uncaught ReferenceError: ReactDOM is not defined
  98. How to get parameter value from query string?
  99. Uncaught ReferenceError: React is not defined
  100. JSX not allowed in files with extension ‘ .js’ with eslint-config-airbnb

Leave a Comment

tech