I'm trying to access the placeholder text in this form input tag, just to validate that the text is correct:

  <form>
    <input name="form" className="form-classname" placeholder="Text inside placeholder"/>
  </form>

I'm shallow rendering this ponent, and have tried this, but since this is placeholder and not text, the node is returning an empty string as input (as would be expected).

expect(wrapper.find('.form-classname').at(0).text()).toEqual('Text inside placeholder')

Suggestions on what to try next?

I'm trying to access the placeholder text in this form input tag, just to validate that the text is correct:

  <form>
    <input name="form" className="form-classname" placeholder="Text inside placeholder"/>
  </form>

I'm shallow rendering this ponent, and have tried this, but since this is placeholder and not text, the node is returning an empty string as input (as would be expected).

expect(wrapper.find('.form-classname').at(0).text()).toEqual('Text inside placeholder')

Suggestions on what to try next?

• javascript
• reactjs
• unit-testing
• jestjs

• 1 It would definitely not be text() as that would be to get the text from inside something like <strong>foobar</strong>. Can you please try expect(wrapper.find('.form-classname').at(0).props().placeholder).toEqual('Text inside placeholder') – Alexander Staroselsky Commented Mar 5, 2019 at 18:17
• That worked! Thank you so much. Could you explain why its necessary to reference props there? And could you also post this as an answer so I could mark it correct? – N.A Commented Mar 5, 2019 at 19:21
• Glad to hear! props() is helpful in this situation because it exposes no only props assigned to given element, but also attributes, in this case placeholder. There be another method that can expose attributes such as placeholder specifically, but props() just exposes a nice object containing props/attributes that can be accessed easily. – Alexander Staroselsky Commented Mar 5, 2019 at 19:30

2 Answers 2

As of the current version of the testing library, you can now simply use the ByPlaceholderText API to do this: https://testing-library./docs/queries/byplaceholdertext/

To access the attribute placeholder you would instead want to use props(). This exposes an object containing both props assigned to the respective element as well attributes.

expect(wrapper.find('.form-classname').at(0).props().placeholder).toEqual('Text inside placeholder')

text() would not be valid in this situation because would be used to get the text inside some kind of block element. For example if you wanted to verify that "foobar" was contained inside <span>foobar</span>, you could use text() to get the text inside the <span>.

Hopefully that helps!