위젯 테스트: Renderflex 오버플로 오류 처리

이전에 UI에서 "A RenderFlex overflowed by..."라는 오류를 확실히 본 적이 있으며, 이 오류는 UI가 사용 가능한 부동산의 범위를 넘어 그림을 그린다는 것을 모두 알고 있습니다.

이것이 화면에 표시되면 수정하기가 매우 쉽지만 위젯을 단위 테스트할 때 이 문제가 발생하면 어떻게 됩니까?

이것은 내가 몇 번 겪었고 대부분 테스트에서 무시했습니다. 위젯 테스트는 우선 순위가 약간 낮습니다. 대부분의 경우 테스트는 여정 또는 통합 테스트.

즉, 비즈니스 로직이 위젯 내에 있는 경우가 있으며 그 시점에서 적절한 단위 테스트를 작성하는 데 시간을 보내는 것이 중요할 수 있습니다.

과거에는 가상 UI로 해킹을 시도하여 몇 가지 유용한 결과를 얻었지만 최근에 이 오류가 발생했을 때 더 안정적인 솔루션을 찾기 위해 샅샅이 뒤졌습니다.

전체 공개, 이것은 대부분 의 아이디어였습니다. 다른 개발자의 삶을 조금 더 쉽게 만들기 위해 공유하는 것을 돕고 있을 뿐입니다.

해결책

저는 단위 테스트를 위해 항상 test_helpers.dart 파일을 보관하고 있으며, 이것이 헬퍼 목록에 가장 최근에 추가된 것입니다.

void ignoreOverflowErrors(
  FlutterErrorDetails details, {
  bool forceReport = false,
}) {
  bool ifIsOverflowError = false;
  bool isUnableToLoadAsset = false;

  // Detect overflow error.
  var exception = details.exception;
  if (exception is FlutterError) {
    ifIsOverflowError = !exception.diagnostics.any(
      (e) => e.value.toString().startsWith("A RenderFlex overflowed by"),
    );
    isUnableToLoadAsset = !exception.diagnostics.any(
      (e) => e.value.toString().startsWith("Unable to load asset"),
    );
  }

  // Ignore if is overflow error.
  if (ifIsOverflowError || isUnableToLoadAsset) {
    debugPrint('Ignored Error');
  } else {
    FlutterError.dumpErrorToConsole(details, forceReport: forceReport);
  }
}

원래 솔루션에서 다소 업데이트했으며 pre-null-safety로 작성되었으며 로컬 자산을 로드하는 오류에 대한 검사도 추가했습니다.

이 헬퍼가 하는 일은 테스트가 이러한 오류 중 하나에 부딪쳤을 때 테스트 러너가 떨어지는 것을 방지하는 것입니다. 최소한 RenderFlex 문제가 테스트에서 예외가 아니라는 것이 매우 어리석다고 생각합니다.
단위 테스트는 논리를 테스트하기 위해 존재하며 헤드리스 환경 내에서 위젯이 얼마나 잘 페인트되는지는 테스트 자체와 관련이 없어야 합니다.

이 도우미를 사용하려면 FlutterError.onError = ignoreOverflowErrors; 를 사용하여 테스트의 일부로 포함하기만 하면 됩니다. 다음 예를 참조하세요.

void main() {
  TestWidgetsFlutterBinding.ensureInitialized();

  testWidgets('Widget Renders Correctly', (tester) async {
    FlutterError.onError = ignoreOverflowErrors;

    await tester.pumpApp(const PrimaryHeader(child: Text('Test')));

    final titleFinder = find.text('Test');

    expect(titleFinder, findsOneWidget);
  });
}

작동하려면 특정 테스트에 할당해야 하며 setUp 또는 setUpAll에 할당할 수 없습니다.


이 내용이 흥미로웠기를 바라며 질문, 의견 또는 개선 사항이 있으면 언제든지 의견을 남겨 주십시오. Flutter 개발 여정을 즐기세요 :D

즐거우셨다면 좋아요는 굉장하고 정말 마음에 드셨다면 cup of coffee 가 좋습니다.

읽어 주셔서 감사합니다.


단위 테스트 주제를 계속 진행하려면 다음을 살펴보십시오.