本文介绍了窗口小部件测试失败，找不到MediaQuery窗口小部件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的问题是关于Flutter小部件测试，什么是测试包装有新Scaffold（...）的现有小部件的正确方法？我发现 MediaQuery.of ，但是它接受 BuildContext 而不是 Widget 。
My question is about flutter widget test, what is proper way to test existing widgets wrapped new Scaffold(...)? I have found MediaQuery.of but it accepts BuildContext instead of Widget.
详细信息：我编写了简单的登录表单小部件并尝试对其进行小部件测试。执行测试后，我得到了例外：
Details: I have wrote simple login form widget and trying to implement widget test for it. After executing test i got exception:
Expected: 'Sorry, only customer can login from mobile device. [Mock]'
Actual: FlutterError:<No MediaQuery widget found.
Scaffold widgets require a MediaQuery widget ancestor.
The specific widget that could not find a MediaQuery ancestor was:
Scaffold-[LabeledGlobalKey<ScaffoldState>#8ffee]
The ownership chain for the affected widget is:
Scaffold-[LabeledGlobalKey<ScaffoldState>#8ffee] ← LoginForm ← [root]
Typically, the MediaQuery widget is introduced by the MaterialApp or WidgetsApp widget at
the top of your application widget tree.>
Which: FlutterError:<No MediaQuery widget found.
Scaffold widgets require a MediaQuery widget ancestor.
The specific widget that could not find a MediaQuery ancestor was:
Scaffold-[LabeledGlobalKey<ScaffoldState>#8ffee]
The ownership chain for the affected widget is:
Scaffold-[LabeledGlobalKey<ScaffoldState>#8ffee] ← LoginForm ← [root]
Typically, the MediaQuery widget is introduced by the MaterialApp or WidgetsApp widget at
the top of your application widget tree.>is not a string
When the exception was thrown, this was the stack:
#4 main.<anonymous closure> (C:\Work\app_mobile\test\login_widget_test.dart:21:5)
<asynchronous suspension>
#5 testWidgets.<anonymous closure>.<anonymous closure>.<anonymous closure> (package:flutter_test\src\widget_tester.dart:61:25)
#6 TestWidgetsFlutterBinding._runTestBody (package:flutter_test\src\binding.dart:471:19)
<asynchronous suspension>
#9 TestWidgetsFlutterBinding._runTest (package:flutter_test\src\binding.dart:458:14)
#10 AutomatedTestWidgetsFlutterBinding.runTest.<anonymous closure> (package:flutter_test\src\binding.dart:640:24)
#11 _FakeAsync.run.<anonymous closure> (package:quiver\testing\src\async\fake_async.dart:186:24)
#15 _FakeAsync.run (package:quiver\testing\src\async\fake_async.dart:185:11)
#16 AutomatedTestWidgetsFlutterBinding.runTest (package:flutter_test\src\binding.dart:638:16)
#17 testWidgets.<anonymous closure>.<anonymous closure> (package:flutter_test\src\widget_tester.dart:60:24)
#18 Declarer.test.<anonymous closure>.<anonymous closure> (package:test\src\backend\declarer.dart:160:19)
<asynchronous suspension>
#19 Invoker.waitForOutstandingCallbacks.<anonymous closure> (package:test\src\backend\invoker.dart:206:15)
<asynchronous suspension>
#23 Invoker.waitForOutstandingCallbacks (package:test\src\backend\invoker.dart:203:5)
#24 Declarer.test.<anonymous closure> (package:test\src\backend\declarer.dart:158:29)
<asynchronous suspension>
#25 Invoker._onRun.<anonymous closure>.<anonymous closure>.<anonymous closure> (package:test\src\backend\invoker.dart:351:23)
<asynchronous suspension>
#27 StackZoneSpecification._run (package:stack_trace\src\stack_zone_specification.dart:209:15)
#28 StackZoneSpecification._registerCallback.<anonymous closure> (package:stack_trace\src\stack_zone_specification.dart:119:48)
#33 StackZoneSpecification._run (package:stack_trace\src\stack_zone_specification.dart:209:15)
#34 StackZoneSpecification._registerCallback.<anonymous closure> (package:stack_trace\src\stack_zone_specification.dart:119:48)
#39 _Timer._runTimers (dart:isolate-patch/dart:isolate/timer_impl.dart:367)
#40 _Timer._handleMessage (dart:isolate-patch/dart:isolate/timer_impl.dart:401)
#41 _RawReceivePortImpl._handleMessage (dart:isolate-patch/dart:isolate/isolate_patch.dart:163)
(elided 17 frames from package dart:async and package dart:async-patch)
：
import 'dart:async';
import 'dart:convert';
import 'package:app_facade/app_facade.dart';
import 'package:app_mobile/utils/dependency_injection.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:flutter/services.dart';
class LoginForm extends StatefulWidget {
const LoginForm({ Key key }) : super(key: key);
static GlobalKey<FormFieldState<String>> emailFieldKey = new GlobalKey<FormFieldState<String>>();
static GlobalKey<FormFieldState<String>> passwordFieldKey = new GlobalKey<FormFieldState<String>>();
static const String routeName = '/';
@override
LoginFormState createState() => new LoginFormState();
}
class LoginData {
String email = '';
String password = '';
}
class LoginFormState extends State<LoginForm> {
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
LoginData loginData = new LoginData();
UserApi _userApi;
void showInSnackBar(String value) {
_scaffoldKey.currentState.showSnackBar(new SnackBar(
content: new Text(value)
));
}
bool _autovalidate = false;
bool _formWasEdited = false;
final GlobalKey<FormState> _formKey = new GlobalKey<FormState>();
@override
void initState() {
super.initState();
_userApi = new Injector().userApi;
}
Future<Null> _handleSubmitted() async {
final FormState form = _formKey.currentState;
if (!form.validate()) {
_autovalidate = true; // Start validating on every change.
showInSnackBar('Please fix the errors in red before submitting.');
} else {
form.save();
login();
}
}
Future<Null> login() async {
try {
await _userApi.login(loginData.email, loginData.password);
Navigator.popAndPushNamed(context, '/user');
} catch (e) {
showInSnackBar(e.toString());
}
}
@override
Widget build(BuildContext context) {
return new Scaffold(
key: _scaffoldKey,
appBar: new AppBar(
title: const Text('Some'),
),
body: new Form(
key: _formKey,
autovalidate: _autovalidate,
child: new ListView(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
children: <Widget>[
new TextFormField(
key: new Key('email'),
decoration: const InputDecoration(
icon: const Icon(Icons.person),
hintText: 'Your email',
labelText: 'Email *',
),
onSaved: (String value) { loginData.email = value; },
),
new TextFormField(
key: LoginForm.passwordFieldKey,
decoration: const InputDecoration(
icon: const Icon(Icons.security),
hintText: 'Your password',
labelText: 'Password *',
),
obscureText: true,
onSaved: (String value) { loginData.password = value; },
),
new Container(
padding: const EdgeInsets.all(20.0),
alignment: const FractionalOffset(0.5, 0.5),
child: new RaisedButton(
child: const Text('SUBMIT'),
onPressed: _handleSubmitted,
),
),
new Container(
padding: const EdgeInsets.only(top: 20.0),
child: new Text('* indicates required field', style: Theme.of(context).textTheme.caption),
),
],
)
),
);
}
}
这是小部件测试：
import 'package:app_facade/app_facade.dart';
import 'package:app_mobile/login_form.dart';
import 'package:app_mobile/utils/dependency_injection.dart';
import 'package:flutter_test/flutter_test.dart';
void main() {
testWidgets('login widget test', (WidgetTester tester) async {
Injector.configure(BackendType.MOCK);
// Tells the tester to build a UI based on the widget tree passed to it
var loginForm = new LoginForm();
await tester.pumpWidget(
loginForm
);
tester.enterText(find.byKey(LoginForm.emailFieldKey), "login");
tester.enterText(find.byKey(LoginForm.passwordFieldKey), "password");
var exception = tester.takeException();
print(exception);
expect(exception, equals('Sorry, only customer can login from mobile device. [Mock]'));
});
}
我发现 MediaQuery.of 但不知道如何将其与现有小部件一起使用？它接受 BuildContext 作为参数。
I have found MediaQuery.of but don't understand how can it be used with existing widget? It accept BuildContext as parameter.
推荐答案
您需要包装小部件与 MediaQuery（...）实例一起使用，并且由于使用的是 Scaffold（..），因此必须将其包装起来在 MaterialApp（..）
You need to wrap your widget with the MediaQuery(...) instance, and because you are using Scaffold(..) you must wrap it in a MaterialApp(..)
示例：
Widget testWidget = new MediaQuery(
data: new MediaQueryData(),
child: new MaterialApp(home: new LoginForm())
)
这篇关于窗口小部件测试失败，找不到MediaQuery窗口小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！