Flutter Mobile Development · Aula

Princípios de testes de widgets

Aprenda a escrever testes de widgets para verificar a interface e o comportamento de widgets individuais de forma isolada, garantindo a correção visual.

Princípios de testes de widgets é uma aula grátis de Flutter Mobile Development no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Flutter Mobile Development, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Flutter Mobile Development inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

What is Widget Testing?

Welcome to widget testing! It's a key part of building robust Flutter apps.

Widget tests let you check if your individual UI components (widgets) look and behave as expected. Think of it as putting each piece of your app under a microscope.

Focus: Individual widgets.
Goal: Verify UI rendering and interaction in isolation.

Diving into `flutter_test`

Flutter provides a special package called flutter_test for writing widget tests. It's automatically included in new Flutter projects.

The core of widget testing is the testWidgets function. It gives you a WidgetTester to interact with your widgets and an environment to run them.

Where Do Tests Go?

Flutter test files typically live in the test/ folder of your project. For example, if you have a widget in lib/my_widget.dart, its test might be in test/my_widget_test.dart.

Each test file starts with importing package:flutter_test/flutter_test.dart and defines one or more testWidgets blocks.

Your Testing Helper: `WidgetTester`

The WidgetTester is your main tool for interacting with widgets during a test. It provides methods to:

pumpWidget(): Renders a widget tree.
find: Locates widgets in the tree.
tap(): Simulates a tap on a widget.
pump(): Rebuilds the widget tree, often after an interaction.

It helps simulate how a user would interact with your app.

Testing a Basic Stateless Widget

Let's test a simple StatelessWidget. Imagine a widget that just shows some text.

We'll use tester.pumpWidget() to display our widget, then tester.find to locate the text, and finally expect() to assert that it's there.

import 'package:flutter/material.dart';

class MyTextWidget extends StatelessWidget {
  final String message;

  const MyTextWidget({Key? key, required this.message}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Test')),
        body: Center(
          child: Text(message),
        ),
      ),
    );
  }
}

void main() {
  runApp(const MyTextWidget(message: "Hello CoddyKit!"));
}

Code: Testing `MyTextWidget`

Here's how you'd write a test for our MyTextWidget. Notice how we wrap it in MaterialApp and Scaffold to give it a proper context for rendering.

We use find.text() to locate the text and expect() with findsOneWidget to confirm its presence.

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

// Assume MyTextWidget is defined in a separate file or above for testing
class MyTextWidget extends StatelessWidget {
  final String message;
  const MyTextWidget({Key? key, required this.message}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Test')),
        body: Center(
          child: Text(message),
        ),
      ),
    );
  }
}

void main() {
  testWidgets('MyTextWidget displays correct message', (WidgetTester tester) async {
    // Build our widget and trigger a frame.
    await tester.pumpWidget(const MyTextWidget(message: 'Hello CoddyKit!'));

    // Verify that our message appears.
    expect(find.text('Hello CoddyKit!'), findsOneWidget);
    expect(find.text('Goodbye!'), findsNothing);
  });
}

Interacting with Widgets

Widget tests can simulate user interactions. This is crucial for testing StatefulWidgets or widgets with buttons, text fields, etc.

tester.tap(finder): Simulates a tap on the widget found by finder.
tester.enterText(finder, text): Enters text into a TextField.
tester.pump(): After an interaction that causes state changes (like a button tap), you must call pump() to rebuild the UI and reflect those changes.

Testing a Basic Stateful Widget

Let's create a simple counter widget. It has a text displaying a number and a button to increment it. We'll test its initial state and then its behavior after a tap.

import 'package:flutter/material.dart';

class CounterWidget extends StatefulWidget {
  const CounterWidget({Key? key}) : super(key: key);

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Counter')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '$_counter',
                key: const Key('counterText'), // Added key for easy finding
                style: Theme.of(context).textTheme.headlineMedium,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          key: const Key('incrementButton'), // Added key
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

void main() {
  runApp(const CounterWidget());
}

Code: Testing `CounterWidget`

Here's the test for our CounterWidget. We first verify the initial count, then simulate a tap on the increment button using its Key, and finally assert that the count has updated.

Remember to call tester.pump() after tester.tap() to rebuild the UI and see the state change.

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

// Assume CounterWidget is defined in a separate file or above for testing
class CounterWidget extends StatefulWidget {
  const CounterWidget({Key? key}) : super(key: key);
  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}
class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() { _counter++; });
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Counter')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text('You have pushed the button this many times:'),
              Text('$_counter', key: const Key('counterText'), style: Theme.of(context).textTheme.headlineMedium),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          key: const Key('incrementButton'),
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

void main() {
  testWidgets('CounterWidget increments counter on button tap', (WidgetTester tester) async {
    // Build our CounterWidget.
    await tester.pumpWidget(const CounterWidget());

    // Verify that the counter starts at 0.
    expect(find.text('0'), findsOneWidget);
    expect(find.text('1'), findsNothing);

    // Tap the 'increment' icon and trigger a frame.
    await tester.tap(find.byKey(const Key('incrementButton')));
    await tester.pump(); // Rebuild the widget after interaction

    // Verify that the counter has incremented.
    expect(find.text('0'), findsNothing);
    expect(find.text('1'), findsOneWidget);
  });
}

Essential Test Matchers

When writing tests, you'll use expect() with various "matchers" to verify conditions. Here are some common ones:

findsOneWidget: Expects exactly one widget matching the finder.
findsNWidgets(N): Expects exactly N widgets.
findsNothing: Expects no widgets matching the finder.
findsWidgets: Expects one or more widgets.

These help you precisely assert what should or shouldn't be on screen.

Quick Check on Testing

Imagine you have a Text('Hello World') widget. Which find method would you use to confirm this text is visible on the screen after calling tester.pumpWidget()?

Recap: Widget Testing Basics

Great job! You've learned the fundamentals of widget testing:

Widget tests verify individual UI components.
The flutter_test package provides tools like testWidgets and WidgetTester.
You use tester.pumpWidget() to render, find to locate, and expect() with matchers to assert.
tester.tap() and tester.pump() simulate user interaction and update the UI.

Next, you'll explore more advanced testing techniques!

Perguntas Frequentes

A aula “Princípios de testes de widgets” é grátis?

Sim — o texto completo de “Princípios de testes de widgets” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Flutter Mobile Development, atualize para CoddyKit PRO. O curso de Flutter Mobile Development inclui 4 aulas no total.

O que vou aprender em “Princípios de testes de widgets”?

Aprenda a escrever testes de widgets para verificar a interface e o comportamento de widgets individuais de forma isolada, garantindo a correção visual. Você pratica Flutter Mobile Development com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Flutter Mobile Development?

Nenhuma experiência prévia é necessária. Flutter Mobile Development no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Princípios de testes de widgets”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Flutter Mobile Development?

Sim. Cada aula de Flutter Mobile Development inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Flutter Mobile Development