Comments (9)
@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.
from cypress-react-selector.
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')
from cypress-react-selector.
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
from cypress-react-selector.
Hi Thanks for raising the issue ans closing it. Can you share your anwser/analysis on this so that others can get benefitted.
Thanks.
from cypress-react-selector.
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.
from cypress-react-selector.
Can you raise a feature request (issue) on the same? Let me find out a possibility for this plugin. Thanks.
from cypress-react-selector.
@wing5822 Thanks for the details. You will get an update by upcoming Monday.
from cypress-react-selector.
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.
from cypress-react-selector.
That I understand. All good =)
from cypress-react-selector.
Related Issues (20)
- when i'm executing the test cases it getting error in test runner "Webpack Compilation Error". Could you please provide valuable suggestions. HOT 1
- waitForReact throws an error when using Webpack HOT 4
- Cannot read properties of undefined (reading 'waitToLoadReact') HOT 2
- Would this work with 3rd party libraries? Such as Material UI? HOT 2
- getting webpack-dev-server warning on resqInjector.js attaching the error. HOT 1
- Selectors are failing when upgrading to React 18 HOT 12
- Update plugin to be compatible with Cypress 10 HOT 4
- Could not find instance of React in given element HOT 6
- Functions react() and getReact() don't retry upcoming assertions
- Functions react() and getReact() - infinite retrying for failed upcoming assertions HOT 1
- Is it possible to get a component from a portal?
- No "sourceType" field on TSConfig compiler options HOT 1
- Using getCurrentState
- Cypress 12 Compatibility
- Can't find component by props with value of type array of objects. HOT 1
- Not able to access the sample tests (e2e tests) HOT 1
- incompatibility with Reactjs version 18
- Selector is reporting too many/duplicate items
- How to call the function inside of a component? HOT 1
- Option to suppress cy.log in getProps and getCurrentState
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cypress-react-selector.