Flutter Mobile Development · Lección

Principios de las pruebas de widgets

Aprenda a escribir pruebas de widgets para verificar de forma aislada la interfaz y el comportamiento de cada widget, garantizando su corrección visual.

Principios de las pruebas de widgets es una lección gratuita de Flutter Mobile Development en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Flutter Mobile Development, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Flutter Mobile Development incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en 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!

Preguntas frecuentes

¿La lección «Principios de las pruebas de widgets» es gratis?

Sí — el texto completo de «Principios de las pruebas de widgets» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Flutter Mobile Development, actualiza a CoddyKit PRO. El curso de Flutter Mobile Development incluye 4 lecciones en total.

¿Qué aprenderé en «Principios de las pruebas de widgets»?

Aprenda a escribir pruebas de widgets para verificar de forma aislada la interfaz y el comportamiento de cada widget, garantizando su corrección visual. Practicas Flutter Mobile Development con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Flutter Mobile Development?

No se requiere experiencia previa. Flutter Mobile Development en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Principios de las pruebas de widgets»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Flutter Mobile Development?

Sí. Cada lección de Flutter Mobile Development incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Flutter Mobile Development