Question

我正在尝试在 Flutter 中执行基本的小部件测试。基本上，我想要一个包含数据列表的列表，并在自定义小部件 (BasicListItem) 中显示每个项目，其中也有一个 ListTile 小部件。< /p>

根小部件：

class MyApp extends StatelessWidget {
  final List taskList = ['List-1', 'List-2', 'List-3'];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: ListView.builder(
            itemCount: taskList.length, itemBuilder: _itemBuilder),
      ),
    );
  }

  Widget _itemBuilder(BuildContext context, int index) {
    final String item = taskList[index];
    return BasicListItem(key: Key(item), title: item);
  }
}

列表项小部件 (BasicListItem) 接受一个标题，并在 ListTile 小部件中使用它。

class BasicListItem extends StatelessWidget {
  final String title;

  const BasicListItem({required Key key, required this.title})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: Icon(Icons.map),
      title: Text(title),
    );
  }
}

这是对它的测试：

testWidgets('has title and Icons', (WidgetTester tester) async {

  const testKey = Key('my-key-1');
  const testTitle = 'Demo title';

  await tester.pumpWidget(BasicListItem(key: testKey, title: testTitle));

  expect(find.text(testTitle), findsOneWidget);
});

但是测试抛出错误：

<块引用>

未找到 Material 小部件。 ListTile 小部件需要一个 Material 小部件祖先。

... ...

<块引用>

以下 TestFailure 对象在运行测试时被抛出：
预期：恰好是小部件树中的一个匹配节点实际： _TextFinder：<带有文本“演示标题”的零小部件（忽略舞台外小部件）>

但是，如果我在 BasicListItem 构建方法中将 ListTile 包裹在 MaterialApp 周围，则测试会通过。像这样：

@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: title,
    home: Scaffold(
      body: ListTile(
        leading: Icon(Icons.map),
        title: Text(title),
      ),
    )
  );
}

但是这样做我不能在 ListView 小部件中使用它。而且我还想要模块化/单独的自定义小部件，以便我也可以在不同的地方使用它。我是新手，也许我错过了一些东西。如何构建自定义小部件并对其进行测试？你能帮我吗。

Answer 1

我一开始没看懂Darshan的回答，因为我觉得他提供的代码让我直接将MaterialApp和Material小部件实现到BasicListItem小部件类build方法中，而不是仅仅在测试服。但这给了我实现它的线索。

所以，这是最终的测试用例。我确实用 BasicListItem 包裹了 MaterialApp 和 Material 小部件，但不是在构建方法中，而是将它们包裹在测试用例中：

testWidgets('has title and Icons', (WidgetTester tester) async {

  const testKey = Key('my-key-1');
  const testTitle = 'Demo title';

  await await tester.pumpWidget(MaterialApp(
    home: Material(
      child: BasicListItem(key: testKey, title: testTitle),
    ),
  ));;

  expect(find.text(testTitle), findsOneWidget);
});

我希望这也能帮助像我这样的人。

Answer 2

ListTile 组件来自 Flutter UI 组件的 Material 部分，它不是一个独立的小部件，因此它需要一个 MaterialApp 作为父组件。

您可以在此处检查 ListTile 是否在材料库下：https://api.flutter.dev/flutter/material/ListTile-class.html

此外，您可以创建多个自定义 Widgets 以在单独的模块中使用，
唯一的要求是在应用初始化开始时使用 MaterialApp。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    /// Only this needs to be a MaterialApp
    return MaterialApp(
      title: 'Welcome to Flutter',

      /// this point to different screen widget also, like MainScreen()
      /// Or you can start using Scaffold from here as well.
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

没有必要在您构建的每个自定义小部件上使用 MaterialApp 作为父级。只要根也可以。
但是，如果您使用单个小部件进行简单的测试，并且它需要一个 Material 祖先，那么您也可以简单地将小部件包装在一个 Material 小部件中。

自定义小部件测试需要材料小部件进行测试

2 个答案: