Why widgets are not visible when running the widget test?

Question

I'm simply trying to imetiate the introduction to widget testing in Flutter, but I'm keep seeing test failure on my basic code example that I implemented.

Here is the test:

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,
      );
    },
  );
}

and here is the OrderDetailsItemWidget to be tested:

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,
                    ),
                  ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

However, it keeps failing:

I assume that I'm not doing something special here, it's just a widget basically with three Texts.

All I need is to verify that the subwidgets (the Texts) are visible when providing the values of the fields. What am I missing here?!

Please note I tried to use the find.text("...") instead of keys, but it didn't work as well.

score 0 · Accepted Answer · answered Dec 07 '21 at 10:48

Wrap the OrderDetailsItemWidget in MaterialApp

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,
   );
  },
 );
}

Why widgets are not visible when running the widget test?

1 Answers1