testing - 如何在小部件测试中等待 Future 方法？

Question

我想测试我的小部件。在我的主页小部件中，有一种调用 API 的方法，然后它将在该小部件中显示结果。这是主页小部件的代码

class HomePage extends StatefulWidget {
  WebScraper _webScraper = WebScraper();

  HomePage();

  HomePage.forTest(Client client) {
    _webScraper.client = client;
  }

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

class _HomePageState extends State<HomePage> {
  List<Post> posts = [];

  bool isPostLoaded = false;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Expanded(
            child: RefreshIndicator(
              child: isPostLoaded ? ListView.builder(
                key: Key('post-list'),
                itemCount: posts.length,
                itemBuilder: (context, index) {
                  return Card(
                    key: Key(posts[index].id.toString()),
                    child: Column(
                      children: <Widget>[
                        Text(posts[index].title),
                        Text(posts[index].content),
                        Row(
                          children: <Widget>[
                          // some code
                          ],
                        )
                      ],
                    ),
                  );
                },
              ) : CircularProgressIndicator(),
              onRefresh: _onRefresh),
          ),
        ],
      ),
    );
  }

  Future<void> _onRefresh() async {
    List<Post> postFromWebsite =
        await this.widget._webScraper.getPostsFromWebsite();
    if (postFromWebsite.length > 0) {
      setState(() {
        posts = postFromWebsite;
        isPostLoaded = true;
      });
    }
  }

这是我的测试代码

void main() {
  var homeHttpMock;
  setUp(() {
    MockClient client = MockClient((request) async {
      String html =
          await rootBundle.loadString('test_resources/test.html');
      return Response(html, 200);
    });

    homeHttpMock = MediaQuery(
      data: MediaQueryData(),
      child: MaterialApp(
        home: HomePage.forTest(client),
      ),
    );
  });

  testWidgets('Show post inside card in the list view',
      (WidgetTester tester) async {
    await tester.pumpWidget(homeHttpMock);
    await tester.pump();
    final listView = find.byKey(Key('post-list'));
    expect(listView, findsOneWidget);
  });

我试过用tester.runAsync，tester.pump有持续时间，tester.pumpAndSettle(这个会超时)，和 FakeAsync 但这些方法不适用于我的小部件测试，它会导致我的测试失败。

提前致谢

Answer 1

在使用@LgFranco 的建议重构我的测试代码并仔细阅读此 article 后，我找到了解决方案.

我把我的测试代码改成了这个

testWidgets('Show post inside card in the list view',
    (WidgetTester tester) async {
  await tester.pumpWidget(homeHttpMock);
  await tester.pumpAndSettle(); // Wait for refresh indicator to stop spinning
  final listView = find.byKey(Key('post-list'));
  expect(listView, findsOneWidget);
});

我必须使用 flutter run my_test_code.dart 命令运行它，因为如果我不这样做，它会引发 pumpAndSettle timed out 错误。然后我意识到这不是小部件测试，因为根据我阅读的文章，我无法在我的小部件测试中测试任何真正的异步工作。

如果有人找到这个问题的另一种解决方案，请提及我。谢谢。