Widget test en Flutter: ejercicio resuelto para testear UI

Si te interesa testing en Flutter, este ejercicio te enseña a validar una interacción de UI con flutter_test.

Enunciado

Testea un contador para comprobar que al pulsar el botón aumenta de 0 a 1.

Solución en Flutter

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

class CounterWidget extends StatefulWidget {
  const CounterWidget({super.key});

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            Text('$count'),
            ElevatedButton(onPressed: () => setState(() => count += 1), child: const Text('Sumar')),
          ],
        ),
      ),
    );
  }
}

void main() {
  testWidgets('incrementa contador al pulsar', (tester) async {
    await tester.pumpWidget(const CounterWidget());

    expect(find.text('0'), findsOneWidget);
    await tester.tap(find.text('Sumar'));
    await tester.pump();
    expect(find.text('1'), findsOneWidget);
  });
}

Resultado esperado

El test pasa y asegura que la interacción principal sigue funcionando.

Errores frecuentes

No usar pump después de interacciones.
Escribir tests demasiado acoplados al layout.
No cubrir casos básicos de error o estado inicial.

Aplicación práctica

Los widget tests reducen regresiones y ahorran tiempo en refactors de interfaz.

Siguiente ejercicio recomendado

Todos los ejercicios Flutter

Práctica guiada y siguiente paso

FAQ

El unit test valida lógica aislada; el widget test valida comportamiento de componentes visuales.

No siempre. Para flujos completos también conviene test de integración.

¿Cuándo empezar a testear en un proyecto Flutter?

Desde el inicio, al menos en casos críticos de UI y lógica de negocio.

Widget test en Flutter: ejercicio resuelto para testear UI