运行 widget 测试时为什么看不到widgets？

Question

我只是想在 Flutter 中模拟 introduction to widget testing，但我在我实现的基本代码示例中一直看到测试失败。

这是测试:

void main() {
  testWidgets(
    "OrderDetailsItemWidget - all fields are provided (quantity, name, and subtext)",
    (WidgetTester tester) async {
      // Arrange, Act
      await tester.pumpWidget(
        const OrderDetailsItemWidget(
          1,
          "name",
          "subtext",
        ),
      );

      // Assert
      expect(
        find.byKey(const Key("order_details_item_widget_quantity")),
        findsOneWidget,
      );
      expect(
        find.byKey(const Key("order_details_item_widget_name")),
        findsOneWidget,
      );
      expect(
        find.byKey(const Key("order_details_item_widget_subtext")),
        findsOneWidget,
      );
    },
  );
}

这里是要测试的OrderDetailsItemWidget：

class OrderDetailsItemWidget extends StatelessWidget {
  final int _quantity;
  final String _name;
  final String _subtext;

  const OrderDetailsItemWidget(
    this._quantity,
    this._name,
    this._subtext, {
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    const double quantitySquareSideValue = 25.0;

    return Container(
      margin: const EdgeInsets.only(
        top: Dimens.sizeXxxs,
        bottom: Dimens.sizeXxxs,
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: quantitySquareSideValue,
            height: quantitySquareSideValue,
            decoration: const BoxDecoration(
              color: DesignColor.colorNeutral4,
              borderRadius: BorderRadius.all(
                Radius.circular(2.0),
              ),
            ),
            child: Center(
              child: Text(
                "$_quantity",
                key: const Key("order_details_item_widget_quantity"),
                style: DesignTypography.typographyBody1.copyWith(
                  color: DesignColor.colorNeutral100,
                ),
              ),
            ),
          ),
          const SizedBox(
            width: Dimens.sizeS,
          ),
          Flexible(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const SizedBox(
                  height: 5.0,
                ),
                Text(
                  _name,
                  key: const Key("order_details_item_widget_name"),
                  textAlign: TextAlign.left,
                  style: DesignTypography.typographySubheading2.copyWith(
                    color: DesignColor.colorNeutral100,
                  ),
                ),
                if (_subtext != null)
                  Text(
                    _subtext,
                    key: const Key("order_details_item_widget_subtext"),
                    textAlign: TextAlign.left,
                    style: DesignTypography.typographyCaption.copyWith(
                      color: DesignColor.colorNeutral70,
                    ),
                  ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

然而，它总是失败：

我假设我在这里没有做任何特别的事情，它只是一个基本上包含三个 Text 的小部件。

我所需要的只是验证子窗口小部件（Texts）在提供字段值时是否可见。我在这里错过了什么？！

请注意，我尝试使用 find.text("...") 而不是按键，但效果不佳。

Answer 1

在 MaterialApp

中包装 OrderDetailsItemWidget

void main() {
  testWidgets(
"OrderDetailsItemWidget - all fields are provided (quantity, name, and 
    subtext)",
    (WidgetTester tester) async {
  
  // Arrange, Act
  await tester.pumpWidget(
    MaterialApp(
      home: const OrderDetailsItemWidget(
        1,
        "name",
        "subtext",
      ),
    ),
  );

  // Assert
  expect(
    find.byKey(const Key("order_details_item_widget_quantity")),
    findsOneWidget,
  );
  expect(
    find.byKey(const Key("order_details_item_widget_name")),
    findsOneWidget,
  );
  expect(
    find.byKey(const Key("order_details_item_widget_subtext")),
    findsOneWidget,
   );
  },
 );
}

运行 widget 测试时为什么看不到widgets？

Why widgets are not visible when running the widget test?

flutter

widget

widget-test-flutter