I have a basic counter app with provider. I can run the test just fine with terminal.

But I want to use vscode instead. I want to see the green checkmarks.

When I run debug on the widget test file, I get the following exception:

══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY
╞═══════════════════════════════════════════════════════════ I/flutter
( 1586): The following assertion was thrown building Scaffold(dirty,
state: ScaffoldState#e4d79(tickers: I/flutter ( 1586): tracking 2
tickers)): I/flutter ( 1586): No Directionality widget found.
I/flutter ( 1586): Scaffold widgets require a Directionality widget
ancestor.

My understanding of this exception is that the widget is being pumped without the material app. So I added and then added “ChangeNotifierProvider” as a parent.

Now this runs the app and produces an image of the home screen. Nothing in the “TEST RESULTS” tab in the terminal of vscode.

I’m learning testing to implemnt in my other app, with multiple screens and providers.

1. How can I do a widget test inside vscode of a single screen ?
2. Do I have to add the “ChangeNotifierProvider” and Material App in every widget test file for every screen?

import 'package:flutter/material.dart';
import 'package:learn_testing/counter_model.dart';
import 'package:learn_testing/decrement_button.dart';
import 'package:learn_testing/increment_button.dart';
import 'package:provider/provider.dart';

class CounterScreen extends StatelessWidget {
  const CounterScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        key: const ValueKey("counter screen appbar"),
        title: const Text("Home Screen"),
      ),
      body: SizedBox(
        width: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Consumer<CounterModel>(
              builder: (context, value, child) {
                return Text(
                  key: const ValueKey("counter value"),
                  value.counter.toString(),
                  style: TextStyle(
                    fontSize: Theme.of(context).textTheme.headlineLarge?.fontSize,
                  ),
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: Container(
        margin: const EdgeInsets.only(left: 45, right: 15),
        child: const Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            DecrementButton(),
            IncrementButton(),
          ],
        ),
      ),
    );
  }
}

The test file

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:learn_testing/counter_screen.dart';

void main() {
  testWidgets(
    'counter screen test',
    (tester) async {
      await tester.pumpWidget(
        // const CounterScreen(),
        ChangeNotifierProvider<CounterModel>(
          create: (context) => CounterModel(),
          child: const MaterialApp(home: CounterScreen()),
        ),
      );

      final appbar = find.byKey(const ValueKey("counter screen appbar"));
      expect(appbar, findsOneWidget);

      final counterValue = find.byKey(const ValueKey("counter value"));
      expect(counterValue, findsOne);

      final incrementButton = find.byKey(const ValueKey("increment button"));
      expect(incrementButton, findsOne);

      final decrementButton = find.byKey(const ValueKey("decrement button"));
      expect(decrementButton, findsOne);

      final counterStartsAtZero = find.text("0");
      expect(counterStartsAtZero, findsOneWidget);
    },
  );
}