What if you want to test a whole widget? The 

 package has some more methods to help with that.

. Let's create a test file for RevExOverviewPage at 

import 'package:flutter_test/flutter_test.dart';
import 'package:revenue_explorer/pages/overview.page.dart';

void main() {
  group('RevExOverviewPage', () {
    testWidgets('handles an empty list of transactions', (tester) async {
      await tester.pumpWidget(const RevExOverviewPage());
    });
  });
}

, which can control a widget very precisely—all the way down to controlling the number of frames or the amount of time it experiences. 

 instantiates and renders a widget as if it were an app all by itself, then triggers one frame.

 method, but in your test environment, there's no 

void main() {
  group('RevExOverviewPage', () {
    testWidgets('handles an empty list of transactions', (tester) async {
      final transactionState = RevExTransactionsState()
        ..transactions = Future.value(<RevExTransaction>[]);
      await tester.pumpWidget(ChangeNotifierProvider.value(
        value: transactionState,
        builder: (_, __) => const RevExOverviewPage(),
      ));
    });
  });
}

 returns a Future that resolves immediately with the given value. Plug that into 

, and that makes the state available to the widget. However, you're not done yet. If you run 

 again, you'll get a "No Directionality widget found" error.

 widget tells its children whether text should go from left to right or right to left (this is important for internationalization). The reason you haven't heard of it is because the 

 takes care of it, along with a few other basic "setup" widgets. If the widget you were testing didn't have a Scaffold, you probably wouldn't need all this—so one option is to make the 

 widget public (by removing the underscore) and test that instead. But it's also easy to provide your own 

void main() {
  group('RevExOverviewPage', () {
    testWidgets('handles an empty list of transactions', (tester) async {
      final transactionState = RevExTransactionsState()
        ..transactions = Future.value(<RevExTransaction>[]);
      await tester.pumpWidget(MaterialApp(
        home: ChangeNotifierProvider.value(
          value: transactionState,
          builder: (_, __) => const RevExOverviewPage(),
        ),
      ));
    });
  });
}

All you're doing so far is rendering the widget for one frame. That doesn't necessarily prove it works. You should wait for all of its children to render, including any animations or delays:

void main() {
  group('RevExOverviewPage', () {
    testWidgets('handles an empty list of transactions', (tester) async {
      final transactionState = RevExTransactionsState()
        ..transactions = Future.value(<RevExTransaction>[]);
      await tester.pumpWidget(MaterialApp(
        home: ChangeNotifierProvider.value(
          value: transactionState,
          builder: (_, __) => const RevExOverviewPage(),
        ),
      ));
      await tester.pumpAndSettle();
    });
  });
}

---
title: Widget tests
description: Testing UI interactions on individual widgets
privateVideoUrl: 
isPublicLesson: true
---

What if you want to test a whole widget? The `flutter_test` package has some more methods to help with that.

## testWidgets

When testing widgets, you'll use the [`testWidgets`](https://api.flutter.dev/flutter/flutter_test/testWidgets.html) method in place of `test`. Let's create a test file for RevExOverviewPage at `test/pages/overview.page_test.dart`. Start it off with this code:

```dart
import 'package:flutter_test/flutter_test.dart';
import 'package:revenue_explorer/pages/overview.page.dart';

void main() {
  group('RevExOverviewPage', () {
    testWidgets('handles an empty list of transactions', (tester) async {
      await tester.pumpWidget(const RevExOverviewPage());
    });
  });
}
```

`tester` is an instance of [`WidgetTester`](https://api.flutter.dev/flutter/flutter_test/WidgetTester-class.html), which can control a widget very precisely—all the way down to controlling the number of frames or the amount of time it experiences. [`pumpWidget`](https://api.flutter.dev/flutter/flutter_test/WidgetTester/pumpWidget.html) instantiates and renders a widget as if it were an app all by itself, then triggers one frame.

If you run `flutter test` right now, you'll get a `ProviderNotFoundException`. That's because `_RevExOverviewPageState` calls `context.read<RevExTransactionsState>()` in its `initState` method and uses a `Consumer<RevExTransactionsState>` in its `build` method, but in your test environment, there's no `Provider<RevExTransactionState>`. That's easy to fix.

```dart
void main() {
  group('RevExOverviewPage', () {
    testWidgets('handles an empty list of transactions', (tester) async {
      final transactionState = RevExTransactionsState()
        ..transactions = Future.value(<RevExTransaction>[]);
      await tester.pumpWidget(ChangeNotifierProvider.value(
        value: transactionState,
        builder: (_, __) => const RevExOverviewPage(),
      ));
    });
  });
}
```

`Future.value` returns a Future that resolves immediately with the given value. Plug that into `RevExTransactionsState` and wrap `RevExOverviewPage` with a [`ChangeNotifierProvider`](https://pub.dev/documentation/provider/latest/provider/ChangeNotifierProvider-class.html), and that makes the state available to the widget. However, you're not done yet. If you run `flutter test` again, you'll get a "No Directionality widget found" error.

The [`Directionality`](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget tells its children whether text should go from left to right or right to left (this is important for internationalization). The reason you haven't heard of it is because the [`MaterialApp`](https://api.flutter.dev/flutter/material/MaterialApp-class.html) widget in `main.dart` takes care of it, along with a few other basic "setup" widgets. If the widget you were testing didn't have a Scaffold, you probably wouldn't need all this—so one option is to make the `_TransactionTable` widget public (by removing the underscore) and test that instead. But it's also easy to provide your own `MaterialApp` in the test:

```dart
void main() {
  group('RevExOverviewPage', () {
    testWidgets('handles an empty list of transactions', (tester) async {
      final transactionState = RevExTransactionsState()
        ..transactions = Future.value(<RevExTransaction>[]);
      await tester.pumpWidget(MaterialApp(
        home: ChangeNotifierProvider.value(
          value: transactionState,
          builder: (_, __) => const RevExOverviewPage(),
        ),
      ));
    });
  });
}
```

Now `flutter test` will run without any failing tests.

## Rendering more frames

Isaac Lyman

Testing UI interactions on individual widgets

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript