feature: implement `toBeChecked`, `toBePartiallyChecked` Jest matchers

[mdjastrzebski]

Describe the Feature

toBeChecked/toBePartiallyChecked are Jest DOM matchers that asserts the state of checkbox input.

Adapting it to our case it would assert the value in any host elements having accessibility role of checkbox and matching accessiblityState: { checked: boolean | 'mixed' } prop.

Possible Implementations

Proposed API:

export function toBeChecked(
  this: jest.MatcherContext,
  element: ReactTestInstance
)

export function toBePartiallyChecked(
  this: jest.MatcherContext,
  element: ReactTestInstance
)

The matcher should:

1. Validate that it is invoked on host element is an accessibility element & has accessibility role of checkbox or radio.
2. Get the current value from accessiblityState: { checked: boolean | 'mixed' } prop.
3. Check the state of checked: true for toBeChecked, false for .not.toBeChecked() and "mixed" for toBePartiallyChecked

Each matcher should have a fairly comprehensive test suite.

Links

• toBeChecked matcher code from Jest DOM: https://github.com/testing-library/jest-dom/blob/main/src/to-be-checked.js

Related Issues

#1454

[kyawthura-gg]

Hi @mdjastrzebski, I'd like to take this issue. Thanks

[mdjastrzebski]

@kyawthura-gg yes go ahead. BTW good job with the toBeEmptyElement matcher!

[mdjastrzebski]

🎉 Release in version: v12.4.0