UI tests in Flutter: minimum scaffold

UI tests in Flutter are great. The set up is not super intuitive, so I'll document how to do it

Minimal scaffold

If you simply try to render your test component, you might get errors related to layouting. The minimal scaffold to set up so that your component renders well is like so:

import 'dart:async';

import 'package:elysium/chatservice.dart';
import 'package:elysium/chatview.dart';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

import 'package:elysium/main.dart';
import 'package:mockito/mockito.dart';


void main() {
  testWidgets('displays messages', (WidgetTester tester) async {
    await tester.pumpWidget(MaterialApp(
        home: Scaffold(body: ChatView.withParameters(MockChatService()))));
    await tester.pump();

    expect(find.text('Bob: hello!'), findsOneWidget);
    expect(find.byType(MessageInput), findsOneWidget);
  });
}

Basically you need to render a MaterialApp, which wraps a Scaffold, which itself wraps your test component.