CODEWITHSUNDEEP
javascriptreactjsunit-testingjestjs
N.A
N.A

Reputation: 311

Access placeholder text to validate with jest

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 component, 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?

Upvotes: 4

Views: 15522

Answers (2)

Michael Joseph
Michael Joseph

Reputation: 61

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

Upvotes: 6

Alexander Staroselsky
Alexander Staroselsky

Reputation: 38817

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!

Upvotes: 5

Related Questions