Widget testing in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this widget test?

Given this Flutter widget test code, what text does the test find on the screen?

Flutter

testWidgets('Finds Hello Text', (WidgetTester tester) async {
  await tester.pumpWidget(MaterialApp(home: Scaffold(body: Text('Hello'))));
  expect(find.text('Hello'), findsOneWidget);
});

A The test finds exactly one widget with text 'Hello'.

B The test finds no widgets with text 'Hello'.

C The test finds multiple widgets with text 'Hello'.

D The test throws a runtime error.

💡 Hint

Look at the widget tree and the text used in the Text widget.

The widget tree contains a Text widget with the string 'Hello'. The test looks for exactly one such widget, so it passes.

❓ lifecycle

intermediate

What happens when tester.pump() is called multiple times?

In Flutter widget tests, what is the effect of calling tester.pump() multiple times in a test?

Flutter

testWidgets('Pump multiple times', (WidgetTester tester) async {
  await tester.pumpWidget(MaterialApp(home: Scaffold(body: Text('Step 1'))));
  await tester.pump();
  await tester.pumpWidget(MaterialApp(home: Scaffold(body: Text('Step 2'))));
  await tester.pump();
  expect(find.text('Step 2'), findsOneWidget);
});

A Calling pump multiple times causes a syntax error.

B Only the first pump call rebuilds the widget tree; others do nothing.

C Each pump rebuilds the widget tree and processes animations or state changes.

D Pump calls clear the widget tree and remove all widgets.

💡 Hint

Think about what pump does in widget testing.

Calling pump rebuilds the widget tree and advances the frame, allowing animations and state changes to process.

🔧 Debug

advanced

Why does this widget test fail with a Finder error?

This test fails with an error that no widget was found. What is the cause?

Flutter

testWidgets('Finds RaisedButton', (WidgetTester tester) async {
  await tester.pumpWidget(MaterialApp(home: Scaffold(body: ElevatedButton(onPressed: () {}, child: Text('Press')))));
  expect(find.byType(RaisedButton), findsOneWidget);
});

A The ElevatedButton widget does not have a child Text widget.

B The test is missing a call to tester.pump(), so the widget tree is empty.

C The MaterialApp widget is missing a theme, causing the button not to render.

D RaisedButton is deprecated and replaced by ElevatedButton, so find.byType(RaisedButton) finds nothing.

💡 Hint

Check the widget types used in the test and the finder.

RaisedButton was replaced by ElevatedButton in Flutter. The finder looks for RaisedButton which does not exist in the widget tree, causing the test to fail.

❓ navigation

advanced

What is the navigation stack after this widget test code runs?

Given this widget test code that pushes a new route, what is the current route's text after the test runs?

Flutter

testWidgets('Navigation test', (WidgetTester tester) async {
  await tester.pumpWidget(MaterialApp(home: Scaffold(body: Builder(builder: (context) {
    return ElevatedButton(onPressed: () {
      Navigator.push(context, MaterialPageRoute(builder: (_) => Scaffold(body: Text('Second'))));
    }, child: Text('Go'));
  }))));
  await tester.tap(find.text('Go'));
  await tester.pumpAndSettle();
  expect(find.text('Second'), findsOneWidget);
});

A The current route still shows the text 'Go'.

B The current route shows the text 'Second'.

C The test throws a navigation error because context is invalid.

D The test fails because pumpAndSettle is missing.

💡 Hint

Consider what Navigator.push and pumpAndSettle do in tests.

The button tap pushes a new route with text 'Second'. pumpAndSettle waits for animations to finish, so the new route is visible and found.

🧠 Conceptual

expert

Which option correctly tests a widget's state change after a button tap?

You have a StatefulWidget that toggles text between 'Off' and 'On' when a button is tapped. Which test code correctly verifies this behavior?

Flutter

class ToggleWidget extends StatefulWidget {
  @override
  State<ToggleWidget> createState() => _ToggleWidgetState();
}
class _ToggleWidgetState extends State<ToggleWidget> {
  bool isOn = false;
  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Text(isOn ? 'On' : 'Off'),
      ElevatedButton(onPressed: () => setState(() => isOn = !isOn), child: Text('Toggle'))
    ]);
  }
}

A

await tester.pumpWidget(MaterialApp(home: ToggleWidget()));
expect(find.text('Off'), findsOneWidget);
await tester.tap(find.text('Toggle'));
await tester.pump();
expect(find.text('On'), findsOneWidget);

B

await tester.pumpWidget(MaterialApp(home: ToggleWidget()));
await tester.tap(find.text('Toggle'));
await tester.pumpAndSettle();
expect(find.text('Off'), findsOneWidget);

C

await tester.pumpWidget(MaterialApp(home: ToggleWidget()));
expect(find.text('On'), findsOneWidget);
await tester.tap(find.text('Toggle'));
await tester.pump();
expect(find.text('Off'), findsOneWidget);

D

await tester.pumpWidget(MaterialApp(home: ToggleWidget()));
await tester.tap(find.text('Toggle'));
expect(find.text('On'), findsOneWidget);

💡 Hint

Remember to call pump() after state changes to rebuild the widget tree.

Option A correctly pumps the widget, verifies initial text, taps the button, pumps again to rebuild, then verifies the changed text.