Dev to webs {Coding…}

ร บทเรียนฟรีด้านการพัฒนาซอฟต์แวร์ ที่ครอบคลุมเนื้อหาหลากหลาย ตั้งแต่การเขียนโค้ดพื้นฐานไปจนถึงเทคนิคขั้นสูง

การเขียน Widget Test ใน Flutter

บทที่ 10: การเขียน Widget Test ใน Flutter

🔖 หมวดบทเรียน: การทดสอบ UI ในแอป Flutter แบบอัตโนมัติ

📌 เหมาะสำหรับ: ผู้ที่ต้องการตรวจสอบว่า widget และการโต้ตอบในหน้าจอทำงานถูกต้อง

🎯 เป้าหมาย: เข้าใจวิธีเขียน Widget Test เพื่อจำลองการใช้งานจริง เช่น การแตะปุ่ม พิมพ์ข้อความ

🧭 เกริ่นนำ

Widget Test เป็นการทดสอบระดับกลาง (ระหว่าง Unit Test และ Integration Test) โดยจำลองการแสดงผลของ widget และการโต้ตอบต่าง ๆ เช่น การกดปุ่ม การกรอกฟอร์ม เพื่อตรวจสอบว่า UI ทำงานถูกต้องตามที่ตั้งใจ โดยไม่ต้องเปิดแอปจริง

⚙️ ติดตั้งแพ็กเกจ (หากยังไม่มี)

dev_dependencies:
  flutter_test:
    sdk: flutter

🧪 ตัวอย่างการเขียน Widget Test

สร้างหน้าทดสอบ simple counter

import 'package:flutter/material.dart';

class CounterPage extends StatefulWidget {
  @override
  _CounterPageState createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('นับจำนวน')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('คุณกดแล้ว:', key: Key('label')),
          Text('$count', key: Key('counter'), style: TextStyle(fontSize: 32)),
          ElevatedButton(
            key: Key('increment'),
            onPressed: () => setState(() => count++),
            child: Text('เพิ่ม'),
          ),
        ],
      ),
    );
  }
}

เขียนไฟล์ counter_test.dart

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

void main() {
  testWidgets('กดปุ่มแล้วค่าเพิ่ม', (WidgetTester tester) async {
    await tester.pumpWidget(MaterialApp(home: CounterPage()));

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

▶️ คำสั่งรัน test

flutter test test/counter_test.dart

✅ สรุป

  • Widget Test จำลอง UI interaction และตรวจสอบผลลัพธ์แบบอัตโนมัติ
  • ใช้ WidgetTester เพื่อจำลองการแตะ พิมพ์ รอ UI rebuild
  • เหมาะกับการทดสอบ logic ที่ผูกกับ UI โดยไม่ต้องเปิด Emulator

ในบทถัดไป เราจะไปเรียนรู้เกี่ยวกับ การจัดการ State หลายระดับด้วย Nested Provider / ScopedModel / Riverpod