hasExactClasses function Null safety Matchers

Matcher hasExactClasses(
  1. dynamic classes
)

Allows you to check whether an Element has certain classes within its HTML class attribute, with no additional or duplicated classes like the hasClasses matcher allows.

classes can be a String of space-separated CSS classes, or an Iterable of String CSS classes.

Similar to jest-dom's toHaveClass matcher when the exact option is set to true.

Examples

<button class="btn extra btn-danger">Delete</button>
import 'package:react/react.dart' as react;
import 'package:react_testing_library/matchers.dart' show hasExactClasses;
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.button({'className': 'btn extra btn-danger'},
        'Delete',
      ),
    );

    // Use react_testing_library queries to store references to the node(s)
    final deleteButton = view.getByRole('button', name: 'Delete');

    // Use the `hasExactClasses` matcher as the second argument of `expect()`
    expect(deleteButton, hasExactClasses('btn-danger extra btn'));
    expect(deleteButton, hasExactClasses(['btn-danger', 'extra', 'btn']));
  });
}

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.

Implementation

Matcher hasExactClasses(dynamic classes) =>
    _ElementClassNameMatcher(_ClassNameMatcher.expected(classes, allowExtraneous: false));