isDisabled top-level constant Matchers

Matcher const isDisabled

Allows you to assert whether an element is disabled from the user's perspective.

It matches if the element is an element that supports the disabled attribute, and the disabled attribute is specified, or the element is a descendant of a FormElement with a disabled attribute.

Similar to jest-dom's toBeDisabled matcher.

Related: isEnabled

Examples

<div>
  <button type="submit" disabled>submit</button>
  <fieldset disabled><input type="text" name="username" value="jane.doe" /></fieldset>
  <a href="..." disabled>link</a>
</div>

import 'package:react/react.dart' as react;
import 'package:react_testing_library/matchers.dart' show isDisabled;
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.button({'type': 'submit', 'disabled': true}, 'submit'),
      react.fieldset({'disabled': true},
        react.input({'type': 'text', 'value': 'jane.doe'}),
      ),
      react.a({'href': '...', 'disabled': true}, 'link'),
    ));

    // Use the `isDisabled` matcher as the second argument of `expect()`
    expect(view.getByRole('button'), isDisabled);
    expect(view.getByRole('textbox'), isDisabled);
    expect(view.getByRole('link'), isEnabled); // Anchor elements cannot be disabled
  });
}

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 isDisabled = _IsDisabled();