Communitygithub.com

flutter/flutter-add-widget-test

위젯 테스터(WidgetTester)를 사용하여 UI 렌더링 및 사용자 상호작용(탭, 스크롤, 텍스트 입력)을 검증하는 컴포넌트 수준의 테스트를 구현합니다. 특정 위젯이 올바른 데이터를 표시하고 예상대로 이벤트에 응답하는지 확인할 때 사용하세요.

flutter-add-widget-test란 무엇인가요?

이 스킬은 Flutter 개발자가 `WidgetTester`를 활용하여 위젯 수준의 자동화된 테스트를 작성하는 방법을 제공합니다. 주요 목적은 UI 구성 요소가 올바르게 렌더링되고 사용자 입력(탭, 스크롤, 텍스트 입력)에 적절히 반응하는지 검증하는 것입니다. 단위 테스트와 통합 테스트의 중간 단계로, 특정 위젯의 동작을 격리된 환경에서 확인할 수 있어 버그 조기 발견과 리팩토링 안정성 향상에 기여합니다. Flutter의 `flutter_test` 패키지를 기반으로 하며, CI/CD 파이프라인에 통합하기 용이합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/flutter/skills/tree/main/skills/flutter-add-widget-test

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

flutter-add-widget-test은(는) 무엇을 하나요?

WidgetTester를 사용하여 UI 렌더링 및 사용자 상호작용(탭, 스크롤, 텍스트 입력)을 검증하는 컴포넌트 수준의 테스트를 구현합니다. 특정 위젯이 올바른 데이터를 표시하고 예상대로 이벤트에 응답하는지 확인할 때 사용하세요.

사용 방법

  1. flutter_test 패키지에서 WidgetTester를 임포트합니다.
  2. testWidgets 함수를 사용하여 테스트를 정의합니다.
  3. pumpWidget을 호출하여 테스트할 위젯을 렌더링합니다.
  4. Finder를 사용하여 특정 위젯을 찾습니다.
  5. tester.tap, tester.scroll, tester.enterText 등으로 상호작용을 시뮬레이션합니다.
  6. expect를 사용하여 상태나 UI가 예상대로 변경되었는지 확인합니다.

예제

import 'package:flutter_test/flutter_test.dart';
import 'package:my_app/my_widget.dart';

void main() {
  testWidgets('MyWidget displays correct text', (WidgetTester tester) async {
    // 위젯 렌더링
    await tester.pumpWidget(MyWidget());

    // 텍스트 찾기
    expect(find.text('Hello'), findsOneWidget);

    // 버튼 탭 시뮬레이션
    await tester.tap(find.byType(ElevatedButton));
    await tester.pump();

    // 탭 후 상태 확인
    expect(find.text('Clicked!'), findsOneWidget);
  });
}

주요 함수

함수설명
pumpWidget위젯을 렌더링합니다.
pump프레임을 다시 빌드합니다.
tap특정 위젯을 탭합니다.
scroll스크롤을 시뮬레이션합니다.
enterText텍스트 필드에 입력합니다.

참고 사항

  • 테스트 파일은 일반적으로 test/ 디렉토리에 위치하며, 파일명은 _test.dart로 끝나야 합니다.
  • flutter_test 패키지는 flutter SDK에 기본 포함되어 있습니다.
  • 복잡한 애니메이션 테스트가 필요한 경우 pumpAndSettle을 사용하여 모든 애니메이션이 완료될 때까지 기다릴 수 있습니다.

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

flutter/flutter-accessibility

Configure your Flutter app to support assistive technologies like Screen Readers

flutter/flutter-accessibility-audit

Triggers an accessibility scan through the widget_inspector and automatically adds Semantics widgets or missing labels to the source code.

flutter/flutter-adding-home-screen-widgets

Adds home screen widgets to a Flutter app for Android and iOS. Use when providing glanceable app information or quick actions on the device home screen.

flutter/flutter-add-integration-test

Configures Flutter Driver for app interaction and converts MCP actions into permanent integration tests. Use when adding integration testing to a project, exploring UI components via MCP, or automating user flows with the integration_test package.

flutter/flutter-add-widget-preview

Adds interactive widget previews to the project using the previews.dart system. Use when creating new UI components or updating existing screens to ensure consistent design and interactive testing.

flutter/flutter-animating-apps

Implements animated effects, transitions, and motion in a Flutter app. Use when adding visual feedback, shared element transitions, or physics-based animations.

flutter/flutter-animation

Add animated effects to your Flutter app

flutter/flutter-apply-architecture-best-practices

Architects a Flutter application using the recommended layered approach (UI, Logic, Data). Use when structuring a new project or refactoring for scalability.

flutter/flutter-app-size

Measure and reduce the size of the Flutter app bundle, APK, or IPA

flutter/flutter-architecting-apps

Architects a Flutter application using the recommended layered approach (UI, Logic, Data). Use when structuring a new project or refactoring for scalability.

flutter/flutter-architecture

Use the Flutter team's recommended app architecture

flutter/flutter-building-forms

Builds Flutter forms with validation and user input handling. Use when creating login screens, data entry forms, or any multi-field user input.

flutter/flutter-building-layouts

Builds Flutter layouts using the constraint system and layout widgets. Use when creating or refining the UI structure of a Flutter application.

flutter/flutter-building-plugins

Builds Flutter plugins that provide native interop for other apps to use. Use when creating reusable packages that bridge Flutter with platform-specific functionality.

flutter/flutter-build-responsive-layout

Use `LayoutBuilder`, `MediaQuery`, or `Expanded/Flexible` to create a layout that adapts to different screen sizes. Use when you need the UI to look good on both mobile and tablet/desktop form factors.

flutter/flutter-caching

Cache data in a Flutter app

flutter/flutter-caching-data

Implements caching strategies for Flutter apps to improve performance and offline support. Use when retaining app data locally to reduce network requests or speed up startup.

flutter/flutter-concurrency

Execute long-running tasks in a background thread in Flutter

flutter/flutter-databases

Work with databases in a Flutter app

flutter/flutter-embedding-native-views

Embeds native Android, iOS, or macOS views into a Flutter app. Use when integrating complex native components like maps or web views.

관련 스킬