hasExactClasses function Matchers

Matcher hasExactClasses(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));