How best to stub/mock rest API calls in Flutter Integration tests - dart

Question

I have a Flutter app that displays data after the user logs in.
I have unit and widget tests and now would like to write my first Integration/end-to-end test to test an entire 'happy path' workflow where the user logs in and views the data.
When the app goes to call the login API (GET login_api_path) I want to return some predefined JSON for what to show on the screen rather than making a real request to the server.
Is this a sensible approach, and if so what is the best way to do this? Most resources I found were specifically for unit testing.

Answer 1

Here's the approach I went with:
Create a mock client that uses the Dart http MockClient:
import 'package:http/testing.dart';
import 'package:http/http.dart';
MockClient integrationTestMockClient = MockClient((request) async {
switch (request.url.toString()) {
case 'https://staging.company.com/api/customer/123':
return Response('{"customer": "123", "name": "Jane Jimmy"}', 200);
case 'https://staging.company.com/api/customer/155':
return Response('{"customer": "155", "name": "Gregor"}', 200);
}
}
Now you need to pass your mock client into your app, when you start up your app in integration tests e.g. test_driver/app.dart
import 'mock_client.dart';
void main() async {
enableFlutterDriverExtension();
final app = await initializeApp(
integrationMockClient,
);
runApp(app);
}
You may need to refactor your non-test code so that when the app starts up, you can inject a client. Either a real client or a mock client when testing.
import 'package:http/http.dart';
void main() => initializeApp(Client());