Flutter Widget测试遇No MediaQuery错误，如何测试嵌套Scaffold组件？

你遇到的问题很典型：你的LoginForm组件内部包含了Scaffold，而Scaffold必须要有一个MediaQuery组件作为祖先（通常由MaterialApp或WidgetsApp在应用顶层提供）。但在你的测试代码里，直接渲染了LoginForm，没有给它提供必要的上层依赖，所以才会抛出找不到MediaQuery的错误。

为什么MediaQuery.of帮不上忙？ #

MediaQuery.of(BuildContext context)是用来从已有的Widget树中获取MediaQuery数据的方法，它不是用来给Widget添加MediaQuery依赖的。你需要做的是在测试时给LoginForm包裹一个能提供MediaQuery的父组件，而不是调用这个方法。

两种可行的解决方案 #

方案1：用MaterialApp包裹测试组件（推荐）

这是最贴近真实应用场景的方式，因为你的LoginForm在实际应用中肯定是在MaterialApp下运行的。修改你的测试代码如下：

void main() {
  testWidgets('login widget test', (WidgetTester tester) async {
    Injector.configure(BackendType.MOCK);
    // 用MaterialApp包裹LoginForm，提供必要的MediaQuery和Material环境
    await tester.pumpWidget( 
      MaterialApp(
        home: LoginForm(),
      )
    );
    tester.enterText(find.byKey(LoginForm.emailFieldKey), "login");
    tester.enterText(find.byKey(LoginForm.passwordFieldKey), "password");
    // 触发登录按钮点击，才会执行登录逻辑抛出异常
    await tester.tap(find.text('SUBMIT'));
    await tester.pump(); // 等待异步操作完成
    var exception = tester.takeException();
    print(exception);
    expect(exception, equals('Sorry, only customer can login from mobile device. [Mock]'));
  });
}

方案2：直接用MediaQuery和Material包裹

如果你不想用完整的MaterialApp，可以手动提供MediaQuery和Material环境（因为Scaffold也依赖Material）：

void main() {
  testWidgets('login widget test', (WidgetTester tester) async {
    Injector.configure(BackendType.MOCK);
    await tester.pumpWidget( 
      MediaQuery(
        data: MediaQueryData(), // 提供默认的MediaQuery数据
        child: Material(
          child: LoginForm(),
        ),
      )
    );
    // 后续测试逻辑和方案1一致
    tester.enterText(find.byKey(LoginForm.emailFieldKey), "login");
    tester.enterText(find.byKey(LoginForm.passwordFieldKey), "password");
    await tester.tap(find.text('SUBMIT'));
    await tester.pump();
    var exception = tester.takeException();
    expect(exception, equals('Sorry, only customer can login from mobile device. [Mock]'));
  });
}

额外提示 #

你原来的测试代码里没有触发登录按钮的点击操作，这样不会执行login()方法，也就不会抛出你期望的异常。所以我在修改后的代码里添加了await tester.tap(find.text('SUBMIT'))和await tester.pump()，确保触发登录逻辑并等待异步操作完成。

内容的提问来源于stack exchange，提问作者Zufar Muhamadeev