Flutter Mobile Development · Урок

Принципы тестирования виджетов

Научитесь писать тесты виджетов для изолированной проверки интерфейса и поведения отдельных виджетов, обеспечивая визуальную корректность.

«Принципы тестирования виджетов» — бесплатный урок Flutter Mobile Development на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Flutter Mobile Development, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Flutter Mobile Development содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

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!

Часто задаваемые вопросы

Урок «Принципы тестирования виджетов» бесплатный?

Да — полный текст урока «Принципы тестирования виджетов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Flutter Mobile Development, подпишись на CoddyKit PRO. Курс Flutter Mobile Development содержит 4 уроков всего.

Чему я научусь в уроке «Принципы тестирования виджетов»?

Научитесь писать тесты виджетов для изолированной проверки интерфейса и поведения отдельных виджетов, обеспечивая визуальную корректность. Ты практикуешь Flutter Mobile Development с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Flutter Mobile Development?

Предыдущий опыт не требуется. Flutter Mobile Development на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Принципы тестирования виджетов»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Flutter Mobile Development?

Да. Каждый урок Flutter Mobile Development включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Flutter Mobile Development