Add toHaveErrorMessage matcher

[SevenOutman]

What:

feature: .toHaveErrorMessage matcher to check whether an invalid element has requested error message.

Why:

This PR is basically a replacement of the stale PR #258 which implements proposal #256.

How:

Most implementation and tests are copied from the original PR with some modification to address testing issues.

Checklist:

• Documentation
• Tests
• Updated Type Definitions [@testing-library/jest-dom] Add toHaveErrorMessage matcher DefinitelyTyped/DefinitelyTyped#53505
• Ready to be merged
  

[gnapse]

Thanks a lot for this. Very thorough implementation and tests. Thanks.

[codecov]

Codecov Report

Merging #370 (2331748) into main (c816955) will not change coverage.
The diff coverage is 100.00%.

@@            Coverage Diff            @@
##              main      #370   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           23        24    +1     
  Lines          554       584   +30     
  Branches       199       215   +16     
=========================================
+ Hits           554       584   +30     

Impacted Files	Coverage Δ
src/to-have-errormessage.js	100.00% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c816955...2331748. Read the comment docs.

[gnapse]

@all-contributors please add @SevenOutman for code, test

[allcontributors]

@gnapse

I've put up a pull request to add @SevenOutman! 🎉

[github-actions]

🎉 This PR is included in version 5.13.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[SevenOutman]

@kentcdodds I'd recommend using this matcher for testing form validation instead of toHaveDescription in your showcases. What do you think?

[kentcdodds]

Sounds great. What showcase are you referring to?

[SevenOutman]

What showcase are you referring to?

I remember seeing several in Testing Javascript courses, but couldn't recall which exactly.

[kentcdodds]

I'll keep it in mind in the future! Thanks 👍

[ITenthusiasm]

Seeing this after the fact. 😅

Just as a heads up @kentcdodds @SevenOutman, the aria-errormessage attribute doesn't have Full Screen Reader support yet. I was very sad to find this out. For instance, I can hear error messages on iOS, but not on MacOS -- as the provided link shows. (From what I know so far, this seems to be a Screen Reader problem, not a Browser problem. Chrome, for instance, is perfectly able to determine an element's error message from aria-errormessage in the devtools.)

It seems that for right now, the recommended way of conveying error messages to users is still to use aria-describedby. But! There's much more support for aria-errormessage now than there used to be a year ago. I'm really hopeful/excited for full support to come through, as aria-errormessage could help with a lot of things.

In the meantime, any documentation or examples that use aria-errormessage might want to have some warnings attached with the aforementioned information.