Any way to get the value of an input/select?

[kwhitaker]

I'm trying to make sure that a select box is rendered with the proper value selected. I don't see any hooks into value in the docs for shallow or render. Is there an obvious thing I'm missing?

[lelandrichardson]

@kwhitaker wrapper.find('input').props().value should get you what you need

Though I wouldn't be opposed to adding a .val() shortcut...

[kwhitaker]

@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": {}
    }
  ]
}

[kwhitaker]

Wait duh. I wasn't explicitly setting value in my component. Blah.

[tshelburne]

@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 mounted 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.

[tshelburne]

@lelandrichardson Any thoughts on this?

[tshelburne]

@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?

[ljharb]

@tshelburne what does mount(<NumberInput value={1000} />).debug() and shallow(<NumberInput value={1000} />).debug() output?

[tshelburne]

@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.

[trusktr]

@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).

[tshelburne]

@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.

[ndeen86]

@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

[abrorAbdullaev]

@kwhitaker wrapper.find('input').props().value should get you what you need

Though 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')