Feature: Allow updating props and states

[abhinaba-ghosh]

it will be nice to mounting react component runtime so that user can update states and props runtime. Something like:

cy.getReact().setProps({})

cy.getReact().setState({});

[wing5822]

Thanks @abhinaba-ghosh, I'll have a look.

Only issue is that I do not have access to the source. I have just been told to test different states using the props.

This function is in react-dev-tools for chrome.

[abhinaba-ghosh]

@wing5822 yes, I truly understand the pain. But the fact is once you change the prop, the component should be re-rendered. I highly doubt, it can be achieved without access to the source code. I am testing some random concepts. Keep an eye in this ticket.

[wing5822]

@abhinaba-ghosh, I'll have a look around too. I think it should be achievable because if you use the react-dev-tools in chrome it allows you to change the props and the component will render accordingly. If find a solution I'll come back.

[wing5822]

Example clip I made. No Audio

https://drive.google.com/file/d/1xF1RdAUyb3GLReenMrW5E6APdsAYY-II/view?usp=sharing

[danieltroger]

Great demo @wing5822, someone should reverse engineer the chrome dev tools! The firefox version does not allow for props to be changed.

[muratkeremozcan]

it will be nice to mounting react component runtime so that user can update states and props runtime. Something like:

cy.getReact().setProps({})

cy.getReact().setState({});

When a component is changing props, it usually when a child component has a state dependency from a parent via that prop. That means we can simulate a dummy parent which wraps our component under test.

We are passing state from the parent, that means we need a way to control that state.

Suppose ChildComponent is the one under test, and it rerenders when the prop signal from the parent changes.

  function ParentComp(): JSX.Element {
    const [isExpanded, toggle] = useState(false)
    return (
      <>
        <button type="button" onClick={() => toggle(!isExpanded)}>
          simulate call
        </button>
        <ChildComponent signal={isExpanded} />
      </>
    )
  }
  
describe('ChildComponent', () => {  
  it("should control child component's prop", () => {
     cy.mount(<ParentComp />)
      
     cy.contains('simulate call').click()
     // we have set the prop
  })
 })