isChecked top-level constant Matchers

Matcher const isChecked

Allows you to check whether the given element is checked.

It accepts an input of type checkbox or radio and elements with a role of checkbox, radio or switch with a valid aria-checked attribute of "true" or "false".

Similar to jest-dom's toBeChecked matcher.

Examples

<div>
  <input type="checkbox" name="pepperoni" checked />
  <input type="checkbox" name="pineapple" />
  <div role="checkbox" aria-checked="true">Red Sauce</div>
  <div role="checkbox" aria-checked="false">White Sauce</div>
  <div role="switch" aria-checked="true">Mozzarella</div>
  <div role="switch" aria-checked="false">Cheddar</div>
</div>

import 'package:react/react.dart' as react;
import 'package:react_testing_library/matchers.dart' show isChecked;
import 'package:react_testing_library/react_testing_library.dart' as rtl;
import 'package:test/test.dart';

main() {
  test('', () {
    // Render the DOM shown in the example snippet above
    final view = rtl.render(react.div({},
      react.input({'type': 'checkbox', 'aria-label': 'pepperoni', 'checked': true}),
      react.input({'type': 'checkbox', 'aria-label': 'pineapple'}),
      react.div({'role': 'checkbox', 'aria-checked': 'true'}, 'Red Sauce'),
      react.div({'role': 'checkbox', 'aria-checked': 'false'}, 'White Sauce'),
      react.div({'role': 'switch', 'aria-checked': 'true'}, 'Mozzarella'),
      react.div({'role': 'switch', 'aria-checked': 'false'}, 'Cheddar'),
    ));

    // Use react_testing_library queries to store references to the node(s)
    final inputCheckboxChecked = view.getByRole('checkbox', name: 'pepperoni');
    final inputCheckboxUnchecked = view.getByRole('checkbox', name: 'pineapple');
    final ariaCheckboxChecked = view.getByRole('checkbox', name: 'Red Sauce');
    final ariaCheckboxUnchecked = view.getByRole('checkbox', name: 'White Sauce');
    final ariaSwitchChecked = view.getByRole('switch', name: 'Mozzarella');
    final ariaSwitchUnchecked = view.getByRole('switch', name: 'Cheddar');

    // Use the `isChecked` matcher as the second argument of `expect()`
    expect(inputCheckboxChecked, isChecked);
    expect(inputCheckboxUnchecked, isNot(isChecked));
    expect(ariaCheckboxChecked, isChecked);
    expect(ariaCheckboxUnchecked, isNot(isChecked));
    expect(ariaSwitchChecked, isChecked);
    expect(ariaSwitchUnchecked, isNot(isChecked));
  });
}

NOTE: render() supports React vDom elements / custom components created using either the

react or over_react packages.

The examples shown here use the react package since the react_testing_library does not have a direct dependency on over_react - but both libraries are fully supported.

{@category Matchers}

Implementation

const Matcher isChecked = _IsChecked();