Comments (12)
@kwhitaker wrapper.find('input').props().value
should get you what you need
Though I wouldn't be opposed to adding a .val()
shortcut...
from enzyme.
@lelandrichardson This works well when you want to test that the prop as an argument is correct, but doesn't work well when you are wanting to test the rendered output. In my case, I am auto-formatting a value as part of the render function as part of the implementation of the component. I might be missing something, but when I try to use a mount
ed component, <input>
s never render the value:
const TextInput = ({value, autoformat}) =>
<div>
<input type="text" value={autoformat(value)} />
</div>
const NumberInput = props => <TextInput autoformat={commas} {...props} />
mount(<NumberInput value={1000} />).find('input').html() // <input type="text"/> instead of <input type="text" value="1,000"/>
shallow(<NumberInput value={1000} />).find('input').html() // Error: This method is only meant to be run on single node. 0 found instead
In many cases, I'm able to use shallow
rendering for many components and it is fine, but some of my components are extensions of lower-level components (as above), and thus mount
appears to be required.
from enzyme.
@trusktr Can't disagree with your reasoning from a technical perspective, but when I'm asking my designers / new developers to update and write unit tests for components, it's a much more reasonable expectation for them to compare HTML strings than to consider the underpinnings of React (simple though it may seem).
We have a robust pattern library in it's own NPM module that is backed by React components, and it's not intended just to be a JS developer's playground, but something accessible to everyone on the team. I'm all about making systems that enable developers at every level, and being able to reliably check the rendered HTML has already been a meaningfully helpful tool.
That said, thanks for the clarification.
from enzyme.
@lelandrichardson thanks for the tip, but sadly that selector comes up as undefined
.
Here's the full props
from wrapper.find('select').props()
:
{
"defaultValue": "en-UP",
"id": "locale-selector",
"children": [" ""
{
"type": "option",
"key": "en-US",
"ref": null,
"props": {
"value": "en-US",
"children": "English (US)"
},
"_owner": null,
"_store": {}
},
{
"type": "option",
"key": "en-UP",
"ref": null,
"props": {
"value": "en-UP",
"children": "English (Uppercase)"
},
"_owner": null,
"_store": {}
}
]
}
from enzyme.
@ljharb Thanks so much for the quick response.
I randomly decided to check what version I was on (2.2.0), and then to update to the latest version to run your request, and now this appears to be working. Sorry for the mistake.
from enzyme.
@trusktr My scenario to test, Am I given the right state property name to the input element's value attribute. like, i have my state property name as "firstName", but i specified as <input type="text" value={this.state.fName}
. Will this make sense to test the above case
from enzyme.
Wait duh. I wasn't explicitly setting value
in my component. Blah.
from enzyme.
@lelandrichardson Any thoughts on this?
from enzyme.
@ljharb I just wanted to ping you on my question above, since you are the number 2 contributor to the library - is this something we can expect to change?
from enzyme.
@tshelburne what does mount(<NumberInput value={1000} />).debug()
and shallow(<NumberInput value={1000} />).debug()
output?
from enzyme.
@tshelburne Checking the value
prop of the input
component as above is enough, because at that point you're relying on React to do it's job (if the value
of an input
component is 'foo', then it must be foo
in the DOM too, otherwise it's a serious bug in React).
from enzyme.
@kwhitaker
wrapper.find('input').props().value
should get you what you needThough I wouldn't be opposed to adding a
.val()
shortcut...
I think getting it with prop() also makes sense
wrappedContent.find('Form Input[id="client_edit_id"]').prop('value')
from enzyme.
Related Issues (20)
- enzyme-adapter-react-18 HOT 2
- Component is not re-rendered with updated states HOT 5
- Cheerio 1.0.0-rc.11 no longer support deep imports HOT 3
- enzyme crash since Cheerio 1.0.0-rc.11 release HOT 5
- CSS selectors match component props rather than rendered DOM HOT 6
- Cannot read property 'child' of undefined on React 16 + enzyme-adapter-react-16 HOT 1
- Cannot read property 'child' of undefined enzyme-adapter-react-16 and react 17.0.2 HOT 3
- "TypeError: Cannot read properties of undefined (reading 'current')" in mount API HOT 7
- Method βpropsβ is only meant to be run on a single node. 0 found instead. HOT 1
- How to test the form which is rendered based on props in class component in react.js ? HOT 3
- How to test the state values which are setting the state from local storage inside componentDidMount in enzyme using reactjs ? HOT 5
- Function `mount` does not mock proper data HOT 5
- [email protected] does not include latest changes as per master HOT 5
- Document `getElement(s)` for full DOM rendering HOT 3
- TypeError: window.require is not a function HOT 5
- Does Enzyme support React 18.0.2 ? HOT 1
- Is this library 'dead'? HOT 5
- Explain how the synchronization works HOT 1
- Mount and simulate are failing after changing to Node 16 HOT 10
- enzyme-adapter-react-18 HOT 1
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 enzyme.