-
-
Notifications
You must be signed in to change notification settings - Fork 28
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature: Allow updating props and states #23
Comments
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. |
@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. |
@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. |
Example clip I made. No Audio https://drive.google.com/file/d/1xF1RdAUyb3GLReenMrW5E6APdsAYY-II/view?usp=sharing |
Great demo @wing5822, someone should reverse engineer the chrome dev tools! The firefox version does not allow for props to be changed. |
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 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
})
}) |
it will be nice to mounting react component runtime so that user can update states and props runtime.
Something like:
The text was updated successfully, but these errors were encountered: