How to deactivate or ignore layout overflow messages in Flutter widget tests?

Question

Tests run with the Ahem font, which is too big, and sometimes it overflows, breaking tests. Some tests don't care about overflow anyway, so there should be a way to deactivate them.

I have many tests which run OK in the simulator, but break in tests.

We are forced to prevent overflows for widgets which will never overflow in reality, or else provide fonts for the tests, instead of Ahem, just for the sake of not overflowing the tests. It makes no sense that overflow errors are tested, unless you are doing "overflow error tests".

How do I turn off these errors, or how do I make tests ignore them?

Answer 1

You cannot disable overflow specifically. But there are a few alternatives:

• Change the font to a "real" font. Your tests don't have to use Ahem font. The documentation is lacking, here's the issue that added this feature: https://github.com/flutter/flutter/issues/17700
• Change the virtual screen size. See How to test Flutter widgets on different screen sizes?
• set FlutterError.onError to null

Answer 2

If your problem is caused purely by the Ahem font being a little too big, you can try shrinking all your text using the accessibility textScaleFactor, by wrapping your WidgetUnderTest in a MediaQuery like so:

MediaQuery(
  // Shrink the text avoid overflow caused by large Ahem font.
  data: MediaQueryData(textScaleFactor: 0.5),
  child: WidgetUnderTest(),
);

This should be much faster than loading a different font in your widget test, and doesn't introduce risk of missing errors by messing with FlutterError.onError. However, if your widget doesn't honor textScaleFactor, or if the overflow is caused by some other reason, this won't help.

Please note that this is probably hiding an actual problem. The best solution is to fix or redesign your UI so that it won't overflow even with testScaleFactor: 1.5 in a large font, so users who set their fonts to the largest setting will be able to use your apps.

Answer 3

Slightly improved Eduardo's answer: fixed the detection test, and throwing an actual exception for non-overflow errors, so that widget tests will actually break.

Function onError_ignoreOverflowErrors = (
  FlutterErrorDetails details, {
  bool forceReport = false,
}) {
  assert(details != null);
  assert(details.exception != null);

  var isOverflowError = false;

  // Detect overflow error.
  var exception = details.exception;
  if (exception is FlutterError) {
    isOverflowError = exception.diagnostics.any((e) => e.value.toString().contains("A RenderFlex overflowed by"));
  }

  // Ignore if is overflow error: only report to the console, but do not throw exception as it will
  // cause widget tests to fail.
  if (isOverflowError) {
    FlutterError.dumpErrorToConsole(details, forceReport: forceReport);
  } else {
    FlutterError.dumpErrorToConsole(details, forceReport: forceReport);
    throw (exception);
  }
};

Answer 4

Thanks for sharing guys, it works just fine!

To anyone who wants to use it in a test:

testWidgets('your test name', (tester) async {
      disableOverflowErrors();
 });

void disableOverflowErrors() {
  //TODO MyScreen throws overflow error. Will be investigate in a different ticket.
  FlutterError.onError = (FlutterErrorDetails details) {
    final exception = details.exception;
    final isOverflowError = exception is FlutterError &&
        !exception.diagnostics.any(
            (e) => e.value.toString().startsWith("A RenderFlex overflowed by"));

    if (isOverflowError) {
      print(details);
    } else {
      FlutterError.presentError(details);
    }
  };
}

Answer 5

if is an overflow on a text widget use attribute softWrap: false, like this

Text(
           'text here',
            softWrap: false,
)

Answer 6

If you only have one exception thrown in your test, you can tell your test to expect it, as below.

expect(
      tester
          .takeException()
          .toString()
          .contains('A RenderFlex overflowed by'),
      true,
    );