Feature Request: Change the prop value for a selected component

[wing5822]

Hi there,

This is not an issue but was wondering if there was a way to change the prop values after selecting the component?

[abhinaba-ghosh]

Hi Thanks for raising the issue ans closing it. Can you share your anwser/analysis on this so that others can get benefitted.

Thanks.

[wing5822]

Sorry, realized that this plugin doesn't have this option so I'm going to either find a way to do it or check another plugin.

[abhinaba-ghosh]

Can you raise a feature request (issue) on the same? Let me find out a possibility for this plugin. Thanks.

[abhinaba-ghosh]

@wing5822 I appreciate the ticket. Would you be able to provide some more information? Any use cases (sample codes) will help me to dig deep.

[wing5822]

hey @abhinaba-ghosh

I'll use your example

const MyComponent = ({ someBooleanProp }) => (
  <div>My Component {someBooleanProp ? 'show this' : ''} </div>
);

const App = () => (
  <div id="root">
    <MyComponent />
    <MyComponent someBooleanProp={true} />
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

We get the react component like so

cy.getReact('MyComponent', { someBooleanProp: 'true' })
  .getProps('someBooleanProp')

But what I want to set the prop value to another value without touching the UI

cy.getReact('MyComponent', { someBooleanProp: 'true' })
  .setProps('someBooleanProp', 'false')

[abhinaba-ghosh]

@wing5822 Thanks for the details. You will get an update by upcoming Monday.

[abhinaba-ghosh]

Hi @wing5822 , after careful analysis, I found out this library can be best suited for E2E testing. Changing prop and state require re-rendering of the React components. So, your tests should have access to source code directly.

Efficient component testing can be achieved using both the libraries:

• cypress-react-selector
• cypress-react-unit-test

You can find an existing example of using these two libraries hand-in-hand.

Although I am still validating enhancing this library to handle all possible use cases. You can track here: #23

[abhinaba-ghosh]

Its main idea is to model the entire process of user-application interaction as near to real-life as possible. A user cannot manipulate a component's props and state directly, so the cypress-react-selector is also not supposed to do this. Instead, you can emulate a user action that should lead to intended props/state modification and then check how it affects a page state after re-render.

Also, direct modification of React component props in the real environment in the middle of the React lifecycle can cause unexpected side-effects, make a test unstable and lead to hard-to-locate bugs.

[wing5822]

That I understand. All good =)