containsElement function Null safety Matchers

Allows you to assert whether an element contains another element as a descendant or not.

Similar to jest-dom's toContainElement matcher.

Examples

<span data-test-id="ancestor">
  <span data-test-id="descendant"></span>
</span>

import 'package:react/react.dart' as react;
import 'package:react_testing_library/matchers.dart' show containsElement;
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.span({'data-test-id': 'ancestor'},
        react.span({'data-test-id': 'descendant'}),
      ),
    );

    // Use react_testing_library queries to store references to the node(s)
    final ancestor = view.getByTestId('ancestor');
    final descendant = view.getByTestId('descendant');

    // Use the `containsElement` matcher as the second argument of `expect()`
    expect(ancestor, containsElement(descendant));
    expect(descendant, isNot(containsElement(ancestor)));
  });
}

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.