blocks|key|10128|text|在navigator+tests+in+the+flutter+repo中，它们使用NavigatorObserver类来观察导航：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|10129|class+TestObserver+extends+NavigatorObserver+{
++OnObservation+onPushed;
++OnObservation+onPopped;
++OnObservation+onRemoved;
++OnObservation+onReplaced;

++@override
++void+didPush(Route<dynamic>+route,+Route<dynamic>+previousRoute)+{
++++if+(onPushed+!=+null)+{
++++++onPushed(route,+previousRoute);
++++}
++}

++@override
++void+didPop(Route<dynamic>+route,+Route<dynamic>+previousRoute)+{
++++if+(onPopped+!=+null)+{
++++++onPopped(route,+previousRoute);
++++}
++}

++@override
++void+didRemove(Route<dynamic>+route,+Route<dynamic>+previousRoute)+{
++++if+(onRemoved+!=+null)
++++++onRemoved(route,+previousRoute);
++}

++@override
++void+didReplace({+Route<dynamic>+oldRoute,+Route<dynamic>+newRoute+})+{
++++if+(onReplaced+!=+null)
++++++onReplaced(newRoute,+oldRoute);
++}
}|code-block|syntax|javascript|10130|这看起来应该可以做你想做的事情，但是它可能只在顶层(MaterialApp)工作，我不确定你是否可以将它提供给一个小部件。|10131|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/flutter/flutter/blob/master/packages/flutter/test/widgets/navigator_test.dart|1|https://docs.flutter.io/flutter/widgets/NavigatorObserver-class.html^0|1|Z|0|16|H|1|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]|$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|F|7|11|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|12|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

In the <a href="https://github.com/flutter/flutter/blob/master/packages/flutter/test/widgets/navigator_test.dart" rel="noreferrer">navigator tests in the flutter repo</a> they use the <a href="https://docs.flutter.io/flutter/widgets/NavigatorObserver-class.html" rel="noreferrer">NavigatorObserver</a> class to observe navigations:

<pre><code>class TestObserver extends NavigatorObserver {
 OnObservation onPushed;
 OnObservation onPopped;
 OnObservation onRemoved;
 OnObservation onReplaced;

 @override
 void didPush(Route&lt;dynamic&gt; route, Route&lt;dynamic&gt; previousRoute) {
 if (onPushed != null) {
 onPushed(route, previousRoute);
 }
 }

 @override
 void didPop(Route&lt;dynamic&gt; route, Route&lt;dynamic&gt; previousRoute) {
 if (onPopped != null) {
 onPopped(route, previousRoute);
 }
 }

 @override
 void didRemove(Route&lt;dynamic&gt; route, Route&lt;dynamic&gt; previousRoute) {
 if (onRemoved != null)
 onRemoved(route, previousRoute);
 }

 @override
 void didReplace({ Route&lt;dynamic&gt; oldRoute, Route&lt;dynamic&gt; newRoute }) {
 if (onReplaced != null)
 onReplaced(newRoute, oldRoute);
 }
}
</code></pre>

This looks like it should do what you want, however it may only work form the top level (MaterialApp), I'm not sure if you can provide it to just a widget.

blocks|key|2453197|text|下面的解决方案，比方说，是一个通用的方法，它不是特定于颤动的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2453198|导航可以从屏幕或小部件中抽象出来。测试可以模拟和注入这种抽象。这种方法应该足以测试这样的行为。|2453199|有几种方法可以实现这一点。为了这个响应，我将展示其中的一个。也许可以把它简化一点，或者让它更"Darty“。|2453200|用于导航的抽象|offset|length|style|BOLD|2453201|class+AppNavigatorFactory+{
++AppNavigator+get(BuildContext+context)+=>
++++++AppNavigator._forNavigator(Navigator.of(context));
}

class+TestAppNavigatorFactory+extends+AppNavigatorFactory+{
++final+AppNavigator+mockAppNavigator;

++TestAppNavigatorFactory(this.mockAppNavigator);

++@override
++AppNavigator+get(BuildContext+context)+=>+mockAppNavigator;
}

class+AppNavigator+{
++NavigatorState+_flutterNavigator;
++AppNavigator._forNavigator(this._flutterNavigator);

++void+showNextscreen()+{
++++_flutterNavigator.pushNamed('/nextscreen');
++}
}|code-block|syntax|javascript|2453202|小部件中的注入|2453203|class+MyScreen+extends+StatefulWidget+{
++final+_appNavigatorFactory;
++MyScreen(this._appNavigatorFactory,+{Key+key})+:+super(key:+key);

++@override
++_MyScreenState+createState()+=>+_MyScreenState(_appNavigatorFactory);
}

class+_MyScreenState+extends+State<MyScreen>+{
++final+_appNavigatorFactory;

++_MyScreenState(this._appNavigatorFactory);

++@override
++Widget+build(BuildContext+context)+{
++++return+Scaffold(
++++++++body:+Center(
++++++++++++child:+RaisedButton(
++++++++++++++++onPressed:+()+{
++++++++++++++++++++_appNavigatorFactory.get(context).showNextscreen();
++++++++++++++++},
++++++++++++++++child:+Text(Strings.traktTvUrl)
++++++++++++)
++++++++)
++++);
++}

}|2453204|测试的示例(使用Mockito+for+Dart)|2453205|class+MockAppNavigator+extends+Mock+implements+AppNavigator+{}

void+main()+{
++final+appNavigator+=+MockAppNavigator();

++setUp(()+{
++++reset(appNavigator);
++});


++testWidgets('Button+is+present+and+triggers+navigation+after+tapped',
++++++(WidgetTester+tester)+async+{

++++await+tester.pumpWidget(MaterialApp(home:+MyScreen(TestAppNavigatorFactory())));

++++expect(find.byType(RaisedButton),+findsOneWidget);
++++await+tester.tap(find.byType(RaisedButton));

++++verify(appNavigator.showNextscreen());
++});
}|2453206|entityMap|0|LINK|mutability|MUTABLE|url|https://pub.dartlang.org/packages/mockito^0|0|0|0|5|2|0|0|0|3|5|2|0|0|0|P|8|G|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|18|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|19|8|@$H|1A|I|1B|J|K]]|9|@]|A|$]]|$1|L|3|M|5|N|7|1C|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1D|8|@$H|1E|I|1F|J|K]|$H|1G|I|1H|J|K]]|9|@]|A|$]]|$1|S|3|T|5|N|7|1I|8|@]|9|@]|A|$O|P]]|$1|U|3|V|5|6|7|1J|8|@$H|1K|I|1L|J|K]]|9|@$H|1M|I|1N|1|1O]]|A|$]]|$1|W|3|X|5|N|7|1P|8|@]|9|@]|A|$O|P]]|$1|Y|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]]]

Following solution is, let's say, a general approach and it's not specific to Flutter.

Navigation could be abstracted away from a screen or a widget. Test can mock and inject this abstraction. This approach should be sufficient for testing such behavior.

There are several ways how to achieve that. I will show one of those, for purpose of this response. Perhaps it's possible to simplify it a bit or to make it more "Darty".

Abstraction for navigation

<pre><code>class AppNavigatorFactory {
 AppNavigator get(BuildContext context) =&gt;
 AppNavigator._forNavigator(Navigator.of(context));
}

class TestAppNavigatorFactory extends AppNavigatorFactory {
 final AppNavigator mockAppNavigator;

 TestAppNavigatorFactory(this.mockAppNavigator);

 @override
 AppNavigator get(BuildContext context) =&gt; mockAppNavigator;
}

class AppNavigator {
 NavigatorState _flutterNavigator;
 AppNavigator._forNavigator(this._flutterNavigator);

 void showNextscreen() {
 _flutterNavigator.pushNamed('/nextscreen');
 }
}
</code></pre>

Injection into a widget

<pre><code>class MyScreen extends StatefulWidget {
 final _appNavigatorFactory;
 MyScreen(this._appNavigatorFactory, {Key key}) : super(key: key);

 @override
 _MyScreenState createState() =&gt; _MyScreenState(_appNavigatorFactory);
}

class _MyScreenState extends State&lt;MyScreen&gt; {
 final _appNavigatorFactory;

 _MyScreenState(this._appNavigatorFactory);

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 body: Center(
 child: RaisedButton(
 onPressed: () {
 _appNavigatorFactory.get(context).showNextscreen();
 },
 child: Text(Strings.traktTvUrl)
 )
 )
 );
 }

}
</code></pre>

Example of a test (Uses <a href="https://pub.dartlang.org/packages/mockito" rel="nofollow noreferrer">Mockito for Dart</a>)

<pre><code>class MockAppNavigator extends Mock implements AppNavigator {}

void main() {
 final appNavigator = MockAppNavigator();

 setUp(() {
 reset(appNavigator);
 });


 testWidgets('Button is present and triggers navigation after tapped',
 (WidgetTester tester) async {

 await tester.pumpWidget(MaterialApp(home: MyScreen(TestAppNavigatorFactory())));

 expect(find.byType(RaisedButton), findsOneWidget);
 await tester.tap(find.byType(RaisedButton));

 verify(appNavigator.showNextscreen());
 });
}
</code></pre>

blocks|key|10191|text|虽然丹尼所说的是正确的和有效的，你也可以创建一个模拟的NavigatorObserver来避免任何额外的样板文件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|10192|import+'package:mockito/mockito.dart';

class+MockNavigatorObserver+extends+Mock+implements+NavigatorObserver+{}|code-block|syntax|javascript|10193|这将转换为您的测试用例，如下所示：|10194|void+main()+{
++testWidgets('Button+is+present+and+triggers+navigation+after+tapped',
++++++(WidgetTester+tester)+async+{
++++final+mockObserver+=+MockNavigatorObserver();
++++await+tester.pumpWidget(
++++++MaterialApp(
++++++++home:+MyScreen(),
++++++++navigatorObservers:+[mockObserver],
++++++),
++++);

++++expect(find.byType(RaisedButton),+findsOneWidget);
++++await+tester.tap(find.byType(RaisedButton));
++++await+tester.pumpAndSettle();

++++///+Verify+that+a+push+event+happened
++++verify(mockObserver.didPush(any,+any));

++++///+You'd+also+want+to+be+sure+that+your+page+is+now
++++///+present+in+the+screen.
++++expect(find.byType(DetailsPage),+findsOneWidget);
++});
}|10195|我在我的博客which+you+can+find+here上写了一篇关于这方面的深入文章。|offset|length|10196|entityMap|0|LINK|mutability|MUTABLE|url|https://iirokrankka.com/2018/08/22/writing-widget-tests-for-navigation-events/^0|0|0|0|0|6|N|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

While what Danny said is correct and works, you can also create a mocked NavigatorObserver to avoid any extra boilerplate:
<pre class="lang-dart prettyprint-override"><code>import 'package:mockito/mockito.dart';

class MockNavigatorObserver extends Mock implements NavigatorObserver {}
</code></pre>
That would translate to your test case as follows:
<pre class="lang-dart prettyprint-override"><code>void main() {
 testWidgets('Button is present and triggers navigation after tapped',
 (WidgetTester tester) async {
 final mockObserver = MockNavigatorObserver();
 await tester.pumpWidget(
 MaterialApp(
 home: MyScreen(),
 navigatorObservers: [mockObserver],
 ),
 );

 expect(find.byType(RaisedButton), findsOneWidget);
 await tester.tap(find.byType(RaisedButton));
 await tester.pumpAndSettle();

 /// Verify that a push event happened
 verify(mockObserver.didPush(any, any));

 /// You'd also want to be sure that your page is now
 /// present in the screen.
 expect(find.byType(DetailsPage), findsOneWidget);
 });
}
</code></pre>
I wrote an in-depth article about this on my blog, <a href="https://iirokrankka.com/2018/08/22/writing-widget-tests-for-navigation-events/" rel="noreferrer">which you can find here</a>.

blocks|key|11776|text|受其他帖子的启发，这是我的基于2022年null-safe+Mockito的方法。假设我有一个想要进行单元测试的助手方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|11777|navigateToNumber(int+number,+BuildContext+context)+{
++Navigator.of(context).pushNamed(
++++++number.isEven+?+'/even'+:+'/odd'
++);
}|code-block|syntax|javascript|11778|可以这样测试：|11779|import+'package:flutter/material.dart';
import+'package:flutter_test/flutter_test.dart';
import+'package:mockito/mockito.dart';
import+'package:mockito/annotations.dart';
import+'package:my_app/number_route_helper.dart';

import+'number_route_helper_test.mocks.dart';


@GenerateMocks([],+
++customMocks:+[
++++MockSpec<NavigatorObserver>(returnNullOnMissingStub:+true)
++])
void+main()+{
++group('NumberRouteHelper',+()+{
++++testWidgets('navigateToNumber',+(WidgetTester+tester)+async+{
++++++final+mockObserver+=+MockNavigatorObserver();

++++++//+"Fake"+routes+used+to+verify+the+right+route+was+pushed
++++++final+evenRoute+=+MaterialPageRoute(builder:+(_)+=>+Container());
++++++final+oddRoute+=+MaterialPageRoute(builder:+(_)+=>+Container());
++++++await+tester.pumpWidget(
++++++++MaterialApp(
++++++++++home:+Container(),
++++++++++navigatorObservers:+[mockObserver],
++++++++++onGenerateRoute:+(RouteSettings+settings)+{
++++++++++++switch+(settings.name)+{
++++++++++++case+'/even':
++++++++++++++return+evenRoute;
++++++++++++case+'/odd':
++++++++++++++return+oddRoute;
++++++++++++}
++++++++++}
++++++++),
++++++);

++++++final+BuildContext+context+=+tester.element(find.byType(Container));

++++++///+Verify+that+a+push+to+evenRoute+happened+
++++++navigateToNumber(2,+context);
++++++await+tester.pumpAndSettle();
++++++verify(mockObserver.didPush(evenRoute,+any));

++++++///+Verify+that+a+push+to+oddRoute+happened
++++++navigateToNumber(3,+context);
++++++await+tester.pumpAndSettle();
++++++verify(mockObserver.didPush(oddRoute,+any));
++++});
++});
}|11780|只需记住，您需要安装Mockito，如下所述：https://pub.dev/packages/mockito|offset|length|11781|entityMap|0|LINK|mutability|MUTABLE|url|https://pub.dev/packages/mockito^0|0|0|0|0|N|W|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

Inspired by the other posts, this is my 2022 null-safe Mockito-based approach. Imagine I have this helper method I want to unit test:
<pre><code>navigateToNumber(int number, BuildContext context) {
 Navigator.of(context).pushNamed(
 number.isEven ? '/even' : '/odd'
 );
}
</code></pre>
It can be tested this way:
<pre><code>import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:mockito/mockito.dart';
import 'package:mockito/annotations.dart';
import 'package:my_app/number_route_helper.dart';

import 'number_route_helper_test.mocks.dart';


@GenerateMocks([], 
 customMocks: [
 MockSpec&lt;NavigatorObserver&gt;(returnNullOnMissingStub: true)
 ])
void main() {
 group('NumberRouteHelper', () {
 testWidgets('navigateToNumber', (WidgetTester tester) async {
 final mockObserver = MockNavigatorObserver();

 // &quot;Fake&quot; routes used to verify the right route was pushed
 final evenRoute = MaterialPageRoute(builder: (_) =&gt; Container());
 final oddRoute = MaterialPageRoute(builder: (_) =&gt; Container());
 await tester.pumpWidget(
 MaterialApp(
 home: Container(),
 navigatorObservers: [mockObserver],
 onGenerateRoute: (RouteSettings settings) {
 switch (settings.name) {
 case '/even':
 return evenRoute;
 case '/odd':
 return oddRoute;
 }
 }
 ),
 );

 final BuildContext context = tester.element(find.byType(Container));

 /// Verify that a push to evenRoute happened 
 navigateToNumber(2, context);
 await tester.pumpAndSettle();
 verify(mockObserver.didPush(evenRoute, any));

 /// Verify that a push to oddRoute happened
 navigateToNumber(3, context);
 await tester.pumpAndSettle();
 verify(mockObserver.didPush(oddRoute, any));
 });
 });
}
</code></pre>
Just remember you need to have Mockito installed, as described here: <a href="https://pub.dev/packages/mockito" rel="nofollow noreferrer">https://pub.dev/packages/mockito</a>

Let's say, I have a test for a screen in Flutter using <code>WidgetTester</code>. There is a button, which executes a navigation via <code>Navigator</code>. I would like to test behavior of that button. 

Widget/Screen

<pre><code>class MyScreen extends StatefulWidget {

 MyScreen({Key key}) : super(key: key);

 @override
 _MyScreenState createState() =&gt; _MyScreenScreenState();
}

class _MyScreenState extends State&lt;MyScreen&gt; {

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 body: Center(
 child: RaisedButton(
 onPressed: () {
 Navigator.of(context).pushNamed("/nextscreen");
 },
 child: Text(Strings.traktTvUrl)
 )
 )
 );
 }

}
</code></pre>

Test

<pre><code>void main() {

 testWidgets('Button is present and triggers navigation after tapped',
 (WidgetTester tester) async {
 await tester.pumpWidget(MaterialApp(home: MyScreen()));
 expect(find.byType(RaisedButton), findsOneWidget);
 await tester.tap(find.byType(RaisedButton));
 //how to test navigator? 
 });
}
</code></pre>

I there a proper way how to check, that Navigator was called? Or is there a way to mock and replace navigator?

Pleas note, that code above will actually fail with an exception, because there is no named route <code>'/nextscreen'</code> declared in application. That's simple to solve and you don't need to point it out.

My main concern is how to correctly approach this test scenario in Flutter.

How to test navigation via Navigator in Flutter

单元测试

Flutter

路由

比方说，我使用WidgetTester在Flutter中测试了一个屏幕。有一个按钮，它通过Navigator执行导航。我想测试一下那个按钮的行为。小工具/屏幕class MyScreen extends StatefulWidget {  MyScreen({Key key}) : super(key: key);  ...

问如何在颤动中通过Navigator测试导航
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在颤动中通过Navigator测试导航EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在颤动中通过Navigator测试导航
EN