小部件测试失败，找不到 MediaQuery 小部件

我的问题是关于 flutter widget 测试的，什么是测试已有 widget 包装的新脚手架(...)的正确方法？我已经找到了 MediaQuery.of，但它接受 BuildContext而不是 Widget。

详细信息: 我已经编写了简单的登录表单小部件，并试图为它实现小部件测试。在执行 test 之后，我得到了异常:

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作为参数。

111850 次浏览
小开
最佳答案

您需要用 MediaQuery(...)实例包装小部件，因为您使用的是 Scaffold(..)，所以必须将它包装在 MaterialApp(..)中

了解更多关于 MediaQuery 的信息

例如:

Widget testWidget = new MediaQuery(
data: new MediaQueryData(),
child: new MaterialApp(home: new LoginForm())
)
小开

我也遇到了同样的问题，而且我还必须把它包装在 Materials alApp 中，但是我采用了一些其他的方法，没有使用 MediaQuery。对我来说很有效

void main() {


Widget createWidgetForTesting({Widget child}){
return MaterialApp(
home: child,
);
}


testWidgets('Login Page smoke test', (WidgetTester tester) async {


await tester.pumpWidget(createWidgetForTesting(child: new LoginPage()));


await tester.pumpAndSettle();


});
}
小开

scaffold()小部件应该是 MaterialApp()的子部件的一个完美示例

import 'package:flutter/material.dart';


class MyApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'title'),
);
}
}


class MyHomePage extends StatefulWidget {
MyHomePage({Key Key, this.title}) : super(key: Key);


@override
_MyHomePageState createState() => _MyHomePageState();


}


class _MyHomePageState extends State<MyHomePage> {
Widget build(BuildContext context) {
return new Scaffold
(
appBar: AppBar(
backgroundColor: Colors.transparent,
title: widget.title
)
}
小开

我也遇到了同样的问题，并用下面的方法解决了。

注意: 我用的是欧盟。

void main() {
testWidgets('Find an app bar with name of weather search',
(WidgetTester tester) async {
await tester.pumpWidget(BlocProvider(
create: (context) => WeatherBloc(WeatherRepo()),
child: const MaterialApp(
home: CounterHomePage(),
),
));


expect(find.text('Weather Search'), findsOneWidget);
});
}
小开

在测试环境中用 MaterialApp包装小部件。

取而代之的是:

await tester.pumpWidget(HomeScreen());

与:

await tester.pumpWidget(MaterialApp(home:HomeScreen()));
小开

把这个换了

void main() {
runApp(const MyApp());
}

用这个

void main() {
runApp(
const MaterialApp(
home: MyApp(),
),
);
}
小开

用 MaterialApp()包装小部件并将新类传递给 MaterialApp()小部件的 home属性。

void main(){
runApp(MyApp());
}
    

class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp( //use MaterialApp() widget like this
home: Home() //create new widget class for this 'home' to
// escape 'No MediaQuery widget found' error
);
}
}

参考文献: 如何解决“找不到 MediaQuery widget”的问题

小开

用 MaterialApp()包装您的主要方法

从这里

     void main() {
runApp(
YourScreen(),
);
}

到

        void main() {
runApp(
MaterialApp(
home: YourScreen(),
),
);
}

我的全部代码

        void main() {
runApp(
MaterialApp(
home: LoginScreen(),
),
);
}
    

class LoginScreen extends StatefulWidget {
@override
_LoginScreen createState() => _LoginScreen();
}
    

class _LoginScreen extends State<LoginScreen> {
    

@override
void initState() {
super.initState();
}
    

    

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(
"Salezrobot",
style: TextStyle(
fontSize: 24,
color: Colors.white,
fontWeight: FontWeight.bold,
fontFamily: 'HelveticaNeue',
),
),
),
body: Text(""),
),
);
}
}
小开

我已经在 Flutter 2.10.4中尝试过了

Widget createWidgetForTesting({required Widget child}) {
return MediaQuery(
data: const MediaQueryData(),
child:MaterialApp(home: Scaffold(body: child)));
}
testWidgets('Test todo title and description', (WidgetTester tester) async {
final todo = MockData.mockTodosData[0];
await tester
.pumpWidget(createWidgetForTesting(child: TodoWidget(item: todo)));
final titleFinder = find.text(todo.title);
final descFinder = find.text(todo.desc);
expect(titleFinder, findsOneWidget);
expect(descFinder, findsOneWidget);
});

它工作得很好。

小开

在我的情况下，我推荐这个启动方案

import 'package:flutter/material.dart';
import 'package:url_strategy/url_strategy.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';


//void main() => runApp(HomePage());
void main() {
//Initialize ScreenUtil
ScreenUtil.ensureScreenSize();
setPathUrlStrategy();
runApp(HomePage());
}


class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);


@override
MyApp createState() => MyApp();
}


class MyApp extends State<HomePage> {
@override
void initState() {
super.initState();
}


// This widget is the root of your application.
@override
Widget build(BuildContext context) {
MaterialApp materialApp = MaterialApp(
debugShowCheckedModeBanner: false,
title: 'TITLE APP',
theme: ThemeData(
primaryColor: kPrimaryColor,
scaffoldBackgroundColor: Color.fromARGB(255, 0, 0, 0),
),
home: InicioScreen(
context: context,
),
onGenerateRoute: (RouteSettings settings) {
switch (settings.name) {
case '/':
return MaterialPageRoute(
builder: (context) => Screen1(context: this.context));
break;
case '/cartelera':
return MaterialPageRoute(
builder: (context) => Screen2(context: this.context),
);
break;
}
},
);


return MediaQuery(
data: new MediaQueryData(),
child: LayoutBuilder(
builder: (context, constraints) {
return OrientationBuilder(
builder: (context, orientation) {
ScreenUtil.init(context);
// SizerUtil().init(constraints, orientation);
return new MaterialApp(home: materialApp);
},
);
},
));
}


@override
void dispose() {
super.dispose();
}
}
小开

只要把脚手架包装在材料应用里，就行了


提交答案