hasStyles function Null safety Matchers

Allows you to check if a certain element has some specific CSS property value(s) applied.

It matches only if the element has all the expected properties applied, not just some of them.

The matcher works with styles applied to an element via an "inline" style attribute value, or external stylesheets that apply the style(s) via CSS selector(s).

Similar to jest-dom's toHaveStyle matcher.

Examples

<button style="display: block; background-color: red">
  Delete
</button>

import 'package:react/react.dart' as react;
import 'package:react_testing_library/matchers.dart' show hasStyles;
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({'style': {
        'display': 'block',
        'backgroundColor': 'red',
      }}, 'Delete'),
    );

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

    // Use the `hasStyles` matcher as the second argument of `expect()`
    expect(button, hasStyles({'display': 'block'}));
    expect(button, hasStyles({
      'backgroundColor': 'red',
      'display': 'block',
    }));
    expect(button, isNot(hasStyles({
      'backgroundColor': 'blue',
      'display': 'block',
    })));
  });
}

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.