Testwire: MCP와 hot reload를 통한 AI 에이전트와 Flutter 테스트

# Testwire: MCP와 핫 리로드로 Flutter 통합 테스트에 AI 에이전트 통합

AI 에이전트들은 높은 토큰 사용량, 긴 빌드 시간, 시각적 맥락 부족으로 Flutter 통합 테스트 작성에 어려움을 겪습니다. Testwire는 VM 서비스에 MCP로 연결된 단계별 테스트 실행 도구를 제공해 이러한 문제를 해결합니다. 이를 통해 에이전트가 프로세스를 제어하고, 스크린샷을 찍으며, 핫 리로드를 활용해 빠르게 수정할 수 있습니다.

Testwire 아키텍처와 작동 원리

Testwire는 Model Context Protocol (MCP)를 통해 상호작용하는 세 가지 핵심 구성 요소로 이루어져 있습니다. 테스트는 flutter run 모드에서 --dart-define=AGENT_MODE=true 플래그와 함께 실행되어 디버그 모드와 Dart VM 서비스 확장을 활성화합니다. testwire_mcp MCP 서버는 VM 서비스를 통해 테스트에 연결되어 에이전트에게 실행 관리를 위한 다양한 도구를 제공합니다. MCP 클라이언트인 AI 에이전트는 이 도구들을 사용해 단계 상태를 모니터링하고, 명령을 실행하며, UI 시각 자료에 접근해 오류를 분석합니다.

에이전트가 사용할 수 있는 주요 MCP 도구:

• connect: VM 서비스 URI를 통해 테스트에 연결.
• step_forward: 다음 단계를 실행하고 일시 중지.
• run_remaining: 남은 모든 단계를 실행하며 오류 발생 시 중지.
• retry_step: 실패한 단계를 재시도.
• get_test_state: 모든 테스트 단계의 상태 확인.
• hot_reload_testwire_test: 진행 상황을 유지하며 핫 리로드.
• hot_restart_testwire_test: 테스트 전체 재시작.
• screenshot: 현재 UI 스크린샷 캡처.
• disconnect: 테스트 연결 해제.

Testwire에서 테스트 구현: 코드와 구조

Testwire 테스트는 핫 리로드를 지원하기 위해 TestwireTest를 확장하는 클래스 구조로 작성됩니다. 각 테스트는 pending, completed, running, failed 상태를 가진 논리적 단계로 나뉩니다. step 메서드를 사용해 설명, 맥락, 액션을 정의합니다. 피드백 폼 검증 예시 테스트 구조는 다음과 같습니다:

class MyTest extends TestwireTest {
  MyTest() : super(
    'Submit feedback form',
    setUp: (tester) async {
      app.main();
      await tester.pumpAndSettle();
    },
  );

  @override
  Future<void> body(WidgetTester tester) async {
    await step(
      description: 'Navigate to Leave Review',
      context: 'Tap the "Leave Review" tile on the home screen.',
      action: () async {
        await tester.tap(find.byKey(const Key('leave_review_tile')));
        await tester.pumpAndSettle();
      },
    );

    await step(
      description: 'Enter name',
      context: 'Type "Alex" into the name field.',
      action: () async {
        await tester.enterText(
          find.byKey(const Key('name_field')), 'Alex');
        await tester.pumpAndSettle();
      },
    );

    await step(
      description: 'Tap 5-star rating',
      context: 'Tap the 5th star to set rating to 5.',
      action: () async {
        await tester.tap(find.byKey(const Key('star_5')));
        await tester.pumpAndSettle();
      },
    );

    await step(
      description: 'Verify result',
      context: 'Check that the success message is displayed.',
      action: () async {
        expect(find.text('Thank you!'), findsOneWidget);
        expect(find.text('5 stars from Alex'), findsOneWidget);
      },
    );
  }
}

핫 리로드: 핵심 디버깅 메커니즘

Testwire의 핫 리로드는 전체 재빌드 없이 테스트 코드를 수정할 수 있게 해 실행 진행 상황을 유지합니다. 단계가 실패하면 테스트가 일시 중지되고, 에이전트가 로그, VM 상태, UI 스크린샷을 검토한 후 핫 리로드를 트리거해 재시도합니다. 이로 인해 개발 사이클이 15~20분에서 몇 번의 반복으로 단축되어 토큰 비용과 컨텍스트 창 사용량이 대폭 줄어듭니다. 핫 리로드 지원을 위해 클래스 기반 테스트(함수 아님)를 사용해 리로드 간 상태를 유지합니다.

개발 및 CI/CD 워크플로우 통합

Testwire는 개발용 에이전트 모드와 CI/CD용 표준 모드 두 가지를 제공합니다. 개발 시 flutter run --dart-define=AGENT_MODE=true로 MCP와 핫 리로드를 활성화합니다. CI에서는 추가 플래그 없이 flutter test로 일반 통합 테스트처럼 실행합니다. 단일 테스트 파일 접근 방식으로 일관성과 유지보수를 간소화합니다. Testwire 통합 시 에이전트 스킬 조정과 문서가 필요하지만, 통합 테스트를 핵심 작업으로 자리매김하게 합니다.

주요 요약

• Testwire는 AI 에이전트의 테스트 작성 고통점(높은 토큰 비용, 느린 빌드, 시각 피드백 부족)을 해결합니다.
• MCP를 통해 VM 서비스에 연결되어 단계별 테스트 제어를 제공합니다.
• 핫 리로드로 재빌드 없이 수정 가능해 개발 사이클을 가속화합니다.
• 핫 리로드와 듀얼 모드 CI/CD 호환을 위한 클래스 기반 테스트입니다.
• 설정이 필요하지만 모든 개발 워크플로우에 테스트를 내장합니다.

— Editorial Team