Widget testing to assert Text widgets style

Question

I am building a Task/To do item widget. The Task widget is implemented using both a ListTile and Checkbox widgets.

class _TaskListItemState extends State<TaskListItem> {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: _goToTaskScreen,
      child: ListTile(
        leading: Checkbox(
            value: widget.task.isComplete, onChanged: _toggleTaskComplete),
        title: Text(
          widget.task.title,
          style: TextStyle(
              decoration: widget.task.isComplete
                  ? TextDecoration.lineThrough
                  : null,
              color: widget.task.isComplete ? Colors.grey : null),
        ),
      ),
    );
  }

  void _goToTaskScreen() {...}

  void _toggleTaskComplete(bool? value) {...});
  }
}

I am trying to test the widget, that if the task is completed then widget's text style decoration should be strike-through, else normal.

testWidgets(
    'if the isCompleted is true, then title text should be strikethrough',
    (WidgetTester tester) async {
  // Arrange
  const testKey = ValueKey('my-key-1');
  const testTitle = 'Demo title';
  const testProjectID = 555;
  final DateTime testDueDate = DateTime.now();
  const testIsComplete = true;

  final Task taskComplete = Task(
      title: testTitle,
      projectID: testProjectID,
      dueDate: testDueDate,
      isComplete: testIsComplete);

  await tester.pumpWidget(MaterialApp(
    home: Material(
      child: TaskListItem(key: testKey, task: taskComplete),
    ),
  ));

  final textFinder = find.byType(Text);
  final textWidget = tester.firstWidget(textFinder);

  expect(textWidget.style.decoration, TextDecoration.lineThrough);
});

App runs fine when runnng flutter run.

But this throws an error, when running flutter test:

est/widgets/task_list_item_test.dart:57:25: Error: The getter 'style' isn't defined for the class 'Widget'.

• 'Widget' is from 'package:flutter/src/widgets/framework.dart' ('/C:/flutter/packages/flutter/lib/src/widgets/framework.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'style'. expect(textWidget.style.decoration, TextDecoration.lineThrough); ^^^^^

I know I am missing something because I have only been learning flutter for over a week. Could you help me how to perform Widget testing to assert a Text widgets style. Thank you!

Answer 1

After running into this issue myself and looking into resolution for testing/assert styles on a Text widget, I found the find.byWidgetPredicate method to the most effect at achieving this.

For you case, you can use byWidgetPredicate like so:

// Define your finder with specific conditions here:
final textWithStrikeThrough = find.byWidgetPredicate(
  (widget) =>
    widget is Text &&
    widget.style.decoration == TextDecoration.lineThrough,
  description: '`Text` widget with strike through',
);

// Now you can use this finder like other finders.
expect(
  textWithStrikeThrough,
  findsOneWidget,
);