feature: implement toHaveAccessibleName Jest matcher

[mdjastrzebski]

Describe the Feature

toHaveAccessibleName is a Jest DOM matcher asserting that given element has certain accessible name: text content or a11y label.

RNTL already contains some code working with accessible name, namely *ByRole query accepts an optional name param. This matcher should compare expect name parameter with all of these:

1. text content of element referenced by accessibilityLabelledBy / aria-labelledby prop
2. accessbilityLabel / aria-label prop
3. text content of given element

These should be evaluated in that particular order.

Possible Implementations

Proposed API:

export function toHaveAccessibleName(
  this: jest.MatcherContext,
  element: ReactTestInstance,
  expectedName?: TextMatch,
  options?: TextMatchOptions,
) 

The matcher should:

1. Validate that it is invoked on a host element
2. When expectedName param is provided check if it matches element's accessible name
3. When expectedName is not provided check if element has accessible name

Each matcher should have a fairly comprehensive test suite.

Related Issues

#1454

[anishamalde]

I can do this!

[mdjastrzebski]

@anishamalde pls go ahead!

[anishamalde]

@mdjastrzebski just double checking this is correct:

export function toHaveAccessibleName(
  this: jest.MatcherContext,
  element: ReactTestInstance,
  expectedName?: TextMatch,
  options?: TextMatchOptions,
) 

[mdjastrzebski]

Yes it's correct signature

[anishamalde]

I have completed the implementation with the exception of it getting labelled by the text content of nested element referenced by accessibilityLabelledBy / aria-labelledby prop.

#1509

I tried the getHostSiblings but this just returns an empty array.

[mdjastrzebski]

@anishamalde you should be able to reuse parts of matchLabelText in order match both label and labelledBy props.

[anishamalde]

Just seen the function, thank-you, will update the PR!

[mdjastrzebski]

Resolved by #1509

[mdjastrzebski]

🎉 Release in version: v12.4.0