Flutter 위젯 테스트에서 Golden Test 도입기

문제 상황

프로젝트 규모가 커지면서 UI 변경이 다른 화면에 영향을 주는 경우가 잦아졌다. 특히 공통 위젯을 수정할 때마다 수동으로 모든 화면을 확인하는 것이 부담스러웠다. 단위 테스트로는 레이아웃 깨짐이나 색상 변경 같은 시각적 회귀를 감지하기 어려웠다.

Golden Test 적용

Flutter의 matchesGoldenFile 매처를 사용해 위젯 스크린샷을 비교하는 테스트를 작성했다.

testWidgets('CustomButton golden test', (tester) async {
  await tester.pumpWidget(
    MaterialApp(
      home: Scaffold(
        body: CustomButton(
          text: 'Submit',
          onPressed: () {},
        ),
      ),
    ),
  );

  await expectLater(
    find.byType(CustomButton),
    matchesGoldenFile('goldens/custom_button.png'),
  );
});

처음 실행 시 --update-goldens 플래그로 기준 이미지를 생성했다.

flutter test --update-goldens

주의했던 점

폰트 렌더링이 OS마다 달라서 CI 환경에서는 실패하는 문제가 있었다. flutter_test_config.dart에서 loadFonts()를 호출해 일관된 폰트를 사용하도록 설정했다.

Future<void> testExecutable(FutureOr<void> Function() testMain) async {
  await loadFonts();
  await testMain();
}

또한 모든 위젯을 Golden Test로 커버하려 하면 관리 부담이 크다. 재사용성이 높은 공통 컴포넌트와 복잡한 레이아웃 위주로 적용했다.

효과

PR마다 UI 스크린샷 차이가 자동으로 검증되면서 리뷰어가 실제 변경 사항을 쉽게 파악할 수 있게 되었다. 예상치 못한 UI 변경이 프로덕션에 배포되는 사고를 몇 차례 예방했다.