记录一个Flutter 3.24单元测试点击事件bug

哈喽,我是老刘

这两天发现一个Flutter 3.24版本的单元测试的一个小bug,提醒大家注意一下。
老刘自己写代码十多年了,写Flutter也6年多了,没想到前两天在一个小小的BottomNavigationBar 组件上翻了车。
给大家分享一下事件的经过。

问题经过

这件事的起因是最近想做一个自己用的小App,Flutter实现。
大家知道我一直是TDD的践行者,所以就先写了首页的测试代码。
首页底部设计有两个tab按钮,我的这个测试是点击按钮切换页面内容。
实现方法是BottomNavigationBar 配合页面内容的TabView。

结果在执行tester.tap方法的地方测试代码就崩了。
就只有一句提示
在这里插入图片描述

大家注意
No tests match “xxx…”
这种提示,如果经排查发现,测试代码中加入某个操作就出现,那么就可以怀疑一下是测试框架底层崩溃导致的。

我当时第一反应是不是我的BottomNavigationBar 的用法有问题?
因为之前是不用这个组件的,我们有自己封装的UI组件库,这次是图省事想简单看一下效果。
但是反复排查也没发现问题,而且真机运行也没问题。

这时候我还是怀疑我自己哪个地方没用对,于是把官方的组件测试代码拿过来试了一下。

testWidgets('BottomNavigationBar callback test', (WidgetTester tester) async {
   
   
  late int mutatedIndex;

  await tester.pumpWidget(
    MaterialApp(
      home: Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarIte
<think>我们被要求使用中文回答,并遵循特定的LaTeX格式要求。同时,需要生成相关问题。 用户问题:如何在Flutter中执行单元测试和集成测试,以及它们的实现方法。 根据提供的引用,我们可以总结如下: 1. 单元测试:用于测试单一功能、方法或类。外部依赖通常被模拟(如使用mockito)。它不涉及磁盘读写、屏幕渲染或外部用户操作。 2. 集成测试:测试应用在真实设备上的整体表现,或者多个部分一起运行的情况。 步骤: 一、单元测试: - 添加依赖:在pubspec.yaml的dev_dependencies中添加flutter_test(通常新项目已经包含)。 - 创建测试文件:在项目根目录下创建test文件夹,并在其中创建测试文件(如math_utils_test.dart)。 - 编写测试用例:使用test函数定义测试用例,使用expect进行断言。 - 运行测试:使用命令`flutter test`或IDE的运行测试按钮。 二、集成测试: - 添加依赖:在pubspec.yaml的dev_dependencies中添加integration_test。 - 创建测试文件:在项目根目录下创建integration_test目录,并在其中创建测试文件(如app_test.dart)。 - 编写测试用例:使用integration_test包提供的API,通常需要启动应用并模拟用户操作。 - 运行测试:使用命令`flutter test integration_test`或者使用`flutter drive`(对于较新的版本,推荐使用`flutter test`命令运行integration_test目录下的测试)。 注意:集成测试可能需要运行在真实设备或模拟器上。 下面我们按照要求组织回答:</think>### Flutter 单元测试与集成测试实现方法 #### **一、单元测试** 单元测试用于验证单一功能/方法/类的逻辑正确性,不涉及外部依赖和界面渲染[^2]。 **实现步骤:** 1. **添加依赖**(pubspec.yaml): ```yaml dev_dependencies: flutter_test: sdk: flutter mockito: ^5.3.0 # 用于模拟外部依赖 ``` 2. **编写测试用例**(test/math_utils_test.dart): ```dart import &#39;package:flutter_test/flutter_test.dart&#39;; import &#39;package:testsample/math_utils.dart&#39;; // 被测代码 void main() { test(&#39;加法测试: 20+30=50&#39;, () { expect(sum(20, 30), 50); // expect(实际值, 预期值) }); test(&#39;乘法测试: 20*30=600&#39;, () { expect(mul(20, 30), 600); }); } ``` 3. **运行测试**: ```bash flutter test test/math_utils_test.dart ``` #### **二、集成测试** 集成测试验证应用在真实设备上的整体行为,测试多模块协作[^1][^4]。 **实现步骤:** 1. **添加依赖**(pubspec.yaml): ```yaml dev_dependencies: integration_test: sdk: flutter flutter_driver: sdk: flutter ``` 2. **创建测试文件**: - 测试入口(test_driver/app.dart): ```dart import &#39;package:integration_test/integration_test_driver.dart&#39;; void main() => integrationDriver(); ``` - 测试用例(integration_test/app_test.dart): ```dart import &#39;package:flutter_test/flutter_test.dart&#39;; import &#39;package:integration_test/integration_test.dart&#39;; void main() { IntegrationTestWidgetsFlutterBinding.ensureInitialized(); testWidgets(&#39;登录流程测试&#39;, (tester) async { await tester.pumpWidget(MyApp()); await tester.tap(find.byKey(Key(&#39;loginButton&#39;))); await tester.pumpAndSettle(); // 等待动画完成 expect(find.text(&#39;欢迎用户&#39;), findsOneWidget); // 验证登录结果 }); } ``` 3. **运行测试**: ```bash flutter drive \ --driver=test_driver/app.dart \ --target=integration_test/app_test.dart ``` #### **关键差异对比** | **特性** | 单元测试 | 集成测试 | |----------------|------------------------------|------------------------------| | **测试范围** | 单一方法/类 | 多模块协作/完整流程 | | **依赖处理** | 使用Mockito模拟外部依赖[^2] | 真实设备/模拟器环境[^4] | | **执行速度** | 快(毫秒级) | 慢(秒级) | | **典型场景** | 工具函数验证 | 登录流程/支付流程[^1] |
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值