Styjun

If your plane is out-of-control, why does military training instruct releasing the joystick to neutralize controls?

How would my creatures handle groups without a strong concept of numbers?

Cops: The Hidden OEIS Substring

Novel where a group of scientists in a spaceship encounter various aliens

How did the hit man miss?

When did the Roman Empire fall according to contemporaries?

ESTA: "Is your travel to the US occurring in transit to another country?" when going on a cruise

Why does the U.S. tolerate foreign influence from Saudi Arabia and Israel on its domestic policies while not tolerating that from China or Russia?

What was the definition of "set" that resulted in Russell's Paradox

How to say "to make my heart sing"

Is Trump personally blocking people on Twitter?

Is there any word for "disobedience to God"?

Should I intentionally omit previous work experience when applying for jobs?

Professor falsely accusing me of cheating in a class he does not teach, two months after end of the class. What precautions should I take?

What's the minimum number of sensors for a hobby GPS waypoint-following UAV?

Why was hardware diversification an asset for the IBM PC ecosystem?

Why would guns not work in the dungeon?

Received a dinner invitation through my employer's email, is it ok to attend?

Why didn't Thanos kill all the Dwarves on Nidavellir?

Why are they 'nude photos'?

Who are "them" and "the brothers" in Acts 22:5?

How can I get a player to accept that they should stop trying to pull stunts without thinking them through first?

Why isn't there research to build a standard lunar, or Martian mobility platform?

Why are Hobbits so fond of mushrooms?

How do I access React component's local state using Cypress?

Passing props to react-redux container componentUnderstanding React-Redux and mapStateToProps()Redux - How to access a non-serializable object which is derived asynchronously?How to transfer states of each react components to store?Combining React local state with Redux global stateRedux dispatch causing component local state to resetReact should i keep a function in local stateSync local react state with data from reduxHow to manage state of React-Navigation without Redux, React NativeUsing redux to initialize a global state then letting local component state take over

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

1

I'm using react with redux and testing with cypress,
I was able to access the store using
cy.window().its('store').invoke('getState').then((state) =>
But how do i access a component's local state rather than the application store?

I tried

cy.get('.simple-component').its('getState')

or

cy.get('.simple-component').invoke('getState')

but Cypress is returning "CypressError: Timed out retrying: cy.invoke() errored because the property: 'getState' does not exist on your subject"
And on the Cypress console (in chrome) it's yeilding:

Yielded: 
<div class="simple-component" getstate="[object Object]"></div>

It seems that's caused by React removing the methods from the DOM so i need to access it in React rather than in the DOM?

import React, Component from 'react';

class simpleComponent extends Component 
 constructor(props) 
 super(props)
 this.state = 
 sample: "hello"
 
 
 // getState() just for testing on cypress
 getState() 
 return this.state
 
 render()
 return <div className="simple-component" getState=this.getState()></div>
 

As an alternative can i export the local component state at the end of the simple-component using window.store?

reactjs redux state invoke cypress

share|improve this question

asked Mar 26 at 3:31

OmarOmar

6122 silver badges88 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  With an end to end testing tool like Cypress you wouldn’t actually be interacting with the React API or directly with the internals of a component such as executing setState(). Instead you be validating/testing what the user would see and experience. What you are attempting to do is more alone the lines of unit testing with tools like Jest/Enzyme. With unit testing you could invoke the internal actions of components such as event handlers and validate Redux store data before/after various events or API calls. Cypress really isn’t meant for that type of testing.
  
  – Alexander Staroselsky
  Mar 26 at 3:53
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Also your components getState prop is executing this.getState() on every render rather than binding the class function to be passed to a child component or execute in response to an event such as click. What’s the intention of that prop and class method in terms of your React application? You won’t really be able to expose state to window or for external use like that.
  
  – Alexander Staroselsky
  Mar 26 at 4:01
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Good point, it's not in the original code but i added it to see it on the cypress console to eliminate the chance that Cypress isn't seeing it in the <div class="simple-component" getstate="[object Object]"></div> Otherwise your first point answers my question, thought it would be nice to be able to access local state similarly to the redux store using Cypress
  
  – Omar
  Mar 26 at 4:13
  
  

  
  
  
  

add a comment | 

1

1

I'm using react with redux and testing with cypress,
I was able to access the store using
cy.window().its('store').invoke('getState').then((state) =>
But how do i access a component's local state rather than the application store?

I tried

cy.get('.simple-component').its('getState')

or

cy.get('.simple-component').invoke('getState')

but Cypress is returning "CypressError: Timed out retrying: cy.invoke() errored because the property: 'getState' does not exist on your subject"
And on the Cypress console (in chrome) it's yeilding:

Yielded: 
<div class="simple-component" getstate="[object Object]"></div>

It seems that's caused by React removing the methods from the DOM so i need to access it in React rather than in the DOM?

import React, Component from 'react';

class simpleComponent extends Component 
 constructor(props) 
 super(props)
 this.state = 
 sample: "hello"
 
 
 // getState() just for testing on cypress
 getState() 
 return this.state
 
 render()
 return <div className="simple-component" getState=this.getState()></div>
 

As an alternative can i export the local component state at the end of the simple-component using window.store?

reactjs redux state invoke cypress

share|improve this question

asked Mar 26 at 3:31

OmarOmar

6122 silver badges88 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  With an end to end testing tool like Cypress you wouldn’t actually be interacting with the React API or directly with the internals of a component such as executing setState(). Instead you be validating/testing what the user would see and experience. What you are attempting to do is more alone the lines of unit testing with tools like Jest/Enzyme. With unit testing you could invoke the internal actions of components such as event handlers and validate Redux store data before/after various events or API calls. Cypress really isn’t meant for that type of testing.
  
  – Alexander Staroselsky
  Mar 26 at 3:53
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Also your components getState prop is executing this.getState() on every render rather than binding the class function to be passed to a child component or execute in response to an event such as click. What’s the intention of that prop and class method in terms of your React application? You won’t really be able to expose state to window or for external use like that.
  
  – Alexander Staroselsky
  Mar 26 at 4:01
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Good point, it's not in the original code but i added it to see it on the cypress console to eliminate the chance that Cypress isn't seeing it in the <div class="simple-component" getstate="[object Object]"></div> Otherwise your first point answers my question, thought it would be nice to be able to access local state similarly to the redux store using Cypress
  
  – Omar
  Mar 26 at 4:13
  
  

  
  
  
  

add a comment | 

I'm using react with redux and testing with cypress,
I was able to access the store using
cy.window().its('store').invoke('getState').then((state) =>
But how do i access a component's local state rather than the application store?

I tried

cy.get('.simple-component').its('getState')

or

cy.get('.simple-component').invoke('getState')

but Cypress is returning "CypressError: Timed out retrying: cy.invoke() errored because the property: 'getState' does not exist on your subject"
And on the Cypress console (in chrome) it's yeilding:

Yielded: 
<div class="simple-component" getstate="[object Object]"></div>

It seems that's caused by React removing the methods from the DOM so i need to access it in React rather than in the DOM?

import React, Component from 'react';

class simpleComponent extends Component 
 constructor(props) 
 super(props)
 this.state = 
 sample: "hello"
 
 
 // getState() just for testing on cypress
 getState() 
 return this.state
 
 render()
 return <div className="simple-component" getState=this.getState()></div>
 

As an alternative can i export the local component state at the end of the simple-component using window.store?

reactjs redux state invoke cypress

share|improve this question

asked Mar 26 at 3:31

OmarOmar

6122 silver badges88 bronze badges

cy.get('.simple-component').its('getState')

cy.get('.simple-component').invoke('getState')

Yielded: 
<div class="simple-component" getstate="[object Object]"></div>

import React, Component from 'react';

class simpleComponent extends Component 
 constructor(props) 
 super(props)
 this.state = 
 sample: "hello"
 
 
 // getState() just for testing on cypress
 getState() 
 return this.state
 
 render()
 return <div className="simple-component" getState=this.getState()></div>
 

share|improve this question

asked Mar 26 at 3:31

OmarOmar

6122 silver badges88 bronze badges

share|improve this question

asked Mar 26 at 3:31

OmarOmar

6122 silver badges88 bronze badges

asked Mar 26 at 3:31

OmarOmar

6122 silver badges88 bronze badges

asked Mar 26 at 3:31

OmarOmar

6122 silver badges88 bronze badges

1 Answer
1

active

oldest

votes

2

There's a Cypress Plugin for that, called react-unit-test. It gives you the ability to mount React components directly (adds a cy.mount() command) and provides access to the component's internal state.

Here's an example from the repo's readme:

// load Cypress TypeScript definitions for IntelliSense
/// <reference types="cypress" />
// import the component you want to test
import HelloState from '../../src/hello-x.jsx'
import React from 'react'
describe('HelloState component', () => 
 it('works', () => 
 // mount the component under test
 cy.mount(<HelloState />)
 // start testing!
 cy.contains('Hello Spider-man!')
 // mounted component can be selected via its name, function, or JSX
 // e.g. '@HelloState', HelloState, or <HelloState />
 cy.get(HelloState)
 .invoke('setState', name: 'React' )
 cy.get(HelloState)
 .its('state')
 .should('deep.equal', name: 'React' )
 // check if GUI has rerendered
 cy.contains('Hello React!')
 )
)

share|improve this answer

answered Mar 26 at 11:59

bkucerabkucera

2,57677 silver badges2323 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55349463%2fhow-do-i-access-react-components-local-state-using-cypress%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

2

There's a Cypress Plugin for that, called react-unit-test. It gives you the ability to mount React components directly (adds a cy.mount() command) and provides access to the component's internal state.

Here's an example from the repo's readme:

// load Cypress TypeScript definitions for IntelliSense
/// <reference types="cypress" />
// import the component you want to test
import HelloState from '../../src/hello-x.jsx'
import React from 'react'
describe('HelloState component', () => 
 it('works', () => 
 // mount the component under test
 cy.mount(<HelloState />)
 // start testing!
 cy.contains('Hello Spider-man!')
 // mounted component can be selected via its name, function, or JSX
 // e.g. '@HelloState', HelloState, or <HelloState />
 cy.get(HelloState)
 .invoke('setState', name: 'React' )
 cy.get(HelloState)
 .its('state')
 .should('deep.equal', name: 'React' )
 // check if GUI has rerendered
 cy.contains('Hello React!')
 )
)

share|improve this answer

answered Mar 26 at 11:59

bkucerabkucera

2,57677 silver badges2323 bronze badges

add a comment | 

2

There's a Cypress Plugin for that, called react-unit-test. It gives you the ability to mount React components directly (adds a cy.mount() command) and provides access to the component's internal state.

Here's an example from the repo's readme:

// load Cypress TypeScript definitions for IntelliSense
/// <reference types="cypress" />
// import the component you want to test
import HelloState from '../../src/hello-x.jsx'
import React from 'react'
describe('HelloState component', () => 
 it('works', () => 
 // mount the component under test
 cy.mount(<HelloState />)
 // start testing!
 cy.contains('Hello Spider-man!')
 // mounted component can be selected via its name, function, or JSX
 // e.g. '@HelloState', HelloState, or <HelloState />
 cy.get(HelloState)
 .invoke('setState', name: 'React' )
 cy.get(HelloState)
 .its('state')
 .should('deep.equal', name: 'React' )
 // check if GUI has rerendered
 cy.contains('Hello React!')
 )
)

share|improve this answer

answered Mar 26 at 11:59

bkucerabkucera

2,57677 silver badges2323 bronze badges

add a comment | 

There's a Cypress Plugin for that, called react-unit-test. It gives you the ability to mount React components directly (adds a cy.mount() command) and provides access to the component's internal state.

Here's an example from the repo's readme:

// load Cypress TypeScript definitions for IntelliSense
/// <reference types="cypress" />
// import the component you want to test
import HelloState from '../../src/hello-x.jsx'
import React from 'react'
describe('HelloState component', () => 
 it('works', () => 
 // mount the component under test
 cy.mount(<HelloState />)
 // start testing!
 cy.contains('Hello Spider-man!')
 // mounted component can be selected via its name, function, or JSX
 // e.g. '@HelloState', HelloState, or <HelloState />
 cy.get(HelloState)
 .invoke('setState', name: 'React' )
 cy.get(HelloState)
 .its('state')
 .should('deep.equal', name: 'React' )
 // check if GUI has rerendered
 cy.contains('Hello React!')
 )
)

share|improve this answer

answered Mar 26 at 11:59

bkucerabkucera

2,57677 silver badges2323 bronze badges

// load Cypress TypeScript definitions for IntelliSense
/// <reference types="cypress" />
// import the component you want to test
import HelloState from '../../src/hello-x.jsx'
import React from 'react'
describe('HelloState component', () => 
 it('works', () => 
 // mount the component under test
 cy.mount(<HelloState />)
 // start testing!
 cy.contains('Hello Spider-man!')
 // mounted component can be selected via its name, function, or JSX
 // e.g. '@HelloState', HelloState, or <HelloState />
 cy.get(HelloState)
 .invoke('setState', name: 'React' )
 cy.get(HelloState)
 .its('state')
 .should('deep.equal', name: 'React' )
 // check if GUI has rerendered
 cy.contains('Hello React!')
 )
)

share|improve this answer

answered Mar 26 at 11:59

bkucerabkucera

2,57677 silver badges2323 bronze badges

answered Mar 26 at 11:59

bkucerabkucera

2,57677 silver badges2323 bronze badges

answered Mar 26 at 11:59

bkucerabkucera

2,57677 silver badges2323 bronze badges