TypeError: Cannot read property 'exists' of undefined

Question

• i am trying to write a test case for a jsx file
• in this I am able to pass proptypes...
• but not where I have passed proptypes propely...
• i am getting an error when i run my test case..
• providing my error, test case and code below...
• TypeError: Cannot read property 'exists' of undefined
• not sure how to make it work with this exists..
• its happing at this function dispatchSidebarExists..
• can you tell me how should i need to put it in my test case

javascript error

 1) shallow renderer tests for sports-template-standard  should render correctly:
     TypeError: Cannot read property 'exists' of undefined
      at [object Object].dispatchSidebarExists (/src/sports-template-standard.jsx:80:56)
      at [object Object].componentWillMount (/src/sports-template-standard.jsx:49:14)
      at [object Object].ReactCompositeComponentMixin.mountComponent (\node_modules\react\lib\ReactCompositeComponent.js:210:12)
      at [object Object].wrapper [as mountComponent] (\node_modules\react\lib\ReactPerf.js:66:21)
      at [object Object].ReactShallowRenderer._render (\node_modules\react\lib\ReactTestUtils.js:362:14)
      at [object Object].ReactShallowRenderer.render (\node_modules\react\lib\ReactTestUtils.js:344:8)
      at Context.<anonymous> (/test/sports-template-standard-tests.js:31:25)
      at callFn (\node_modules\mocha\lib\runnable.js:286:21)
      at Test.Runnable.run (\node_modules\mocha\lib\runnable.js:279:7)
      at Runner.runTest (\node_modules\mocha\lib\runner.js:421:10)
      at \node_modules\mocha\lib\runner.js:528:12
      at next (\node_modules\mocha\lib\runner.js:341:14)
      at \node_modules\mocha\lib\runner.js:351:7
      at next (\node_modules\mocha\lib\runner.js:283:14)
      at Immediate._onImmediate (\node_modules\mocha\lib\runner.js:319:5)

test cases

`javascript`
import {expect} from 'chai';
import React from 'react';
import TestUtils from 'react-addons-test-utils';
import initializeJsDom from './test-utils/dom.js';
import {SportsPageClasses} from 'sports-css-grids';
import sportsMockUpStandard from '../src/sports-template-standard';

describe('shallow renderer tests for sports-template-standard ', function() {
    let shallowRenderer = TestUtils.createRenderer();
    console.log("shallowRenderer" + JSON.stringify(shallowRenderer));

    it('should render correctly', () => {

        //var rightPanel ="some string";
        var layout ="some string";        
        var hasSidebar = function(){
            done();
        }
        console.log("here1");
        //this.props.layout.rightPanel.exists = 'some value';

        shallowRenderer.render(<sportsMockUpStandard
            headerClass='8887' 
            layout= {{id: 100, text: 'hello world'}} 
            sidebar= {[{hasSidebar},{id: 100, text: 'hello world'}]} 
            title={"Demo"} />);

        // shallowRenderer.render(<sportsMockUpStandard

        //layout= {{id: 100, text: 'hello world'}}  />); 

        console.log("here2");
    });
});

snippet code

`javascript`    
dispatchSidebarExists(props) {
    let hasSidebar = !!props.sidebar;

    // infinite loop without this check
    if (hasSidebar !== this.props.layout.rightPanel.exists) {
        this.props.dispatch(setSportsCornerState({
            exists: hasSidebar
        }));
    }
}

whole code

export function setSportsCornerState(stateString) { return { type: 'SET_HEADERPANEL', stateString }; } ```

new warning

 Warning: Failed propType: Invalid prop `sidebar` supplied to `sportsMockUpStandard`.


 // var rightPanel ="some string";
        var layout ="some string";

         var hasSidebar = function(){
          //  done();
    }
        console.log("here1");
      //  this.props.layout.rightPanel.exists = 'some value';

        shallowRenderer.render(<sportsMockUpStandard
            headerClass='8887' 
            layout= {{rightPanel: {exists: hasSidebar}, text: 'hello world'}} 
            sidebar= {[{hasSidebar},{id: 100, text: 'hello world'}]} 
            title={"Demo"} dispatch={hasSidebar} />);

Answer 1

Basically, your reducer is calling the property exists on the state, right? But it's not finding it? That's because you've dispatched an object but haven't added the payload.

Your code says you dispatch the object like this.

setSportsCornerState(stateString) { 
    return { type: 'SET_HEADERPANEL', stateString }; 
}

Given your code here....

this.props.dispatch(setSportsCornerState({
            exists: hasSidebar
        }));

.... That means the object you're dispatching is going to look like this.

 { type: 'SET_HEADERPANEL', {exists: hasSidebar} }

I'm actually not sure how the property get's named in this case, if you have an object and another object inside it without a property name. That being said, this is what your object SHOULD look like.

     { type: 'SET_HEADERPANEL', payload: {exists: hasSidebar} }

If you want to pass information to a reducer, you need to pass it through the payload property. Your object should always have a payload, and that payload should always be an object. Change your code to the following.

export function setSportsCornerState(stateString) { 
    return { type: 'SET_HEADERPANEL', payload: stateString }; 
} 

This set's the payload object as the information you want to pass. Then your reducer, should look for the exists property on the payload object.