mocking Dio is not working to test my app in Flutter

Question

I am trying to write unit tests for my request with Dio but I keep getting this error: type 'Null' is not a subtype of type 'BaseOptions'

I tried adding the base options on DioMock in a lot of different ways but the test remains the same. How can I fix it?

Bellow are my Network class and the test class.

class NetworkService {

  final Dio dio;

  NetworkService(this.dio){
    dio.options.baseUrl = "https://food2fork.ca/api/recipe/search";
    dio.options.headers['Authorization'] = 'Token 9c8b06d329136da358c2d00e76946b0111ce2c48';

    dio.interceptors.add(InterceptorsWrapper(
      onRequest: (options, handler){
        print('base ${options.baseUrl}');
        print("PATH: ${options.path}");
        return handler.next(options);
      },
      onResponse: (response, handler){
        print("RESPONSE: ${response.statusCode}  PATH: ${response.requestOptions.path}");
    return handler.next(response);
    },
      onError: (DioError e, handler){
        print("ERROR: ${e.response?.statusCode} => PATH: ${e.requestOptions.path}");
        return handler.next(e);
      }
    ));
  }

  Future<List<Recipe>> getRecipe() async {
    var response = await dio.get('/?page=1&query=beef');
    print("response ${response.data}");
    if(response.statusCode == 200){
      final List<Recipe> recipeList = [];
      for(Map<String, dynamic> recipe in response.data['results']){
        recipeList.add(Recipe.fromJson(recipe));
      }
      return recipeList;
    } else {
      throw Exception('sss');
    }

  // ONBOARDING
  }
}

class DioMock extends Mock implements DioForNative {}

class RecipeMock extends Mock implements Recipe {}

main() {

  final dio = DioMock();

  final service = NetworkService(dio);

  dio.options.baseUrl = "https://food2fork.ca/api/recipe/search";
  dio.options.headers =  { 'Content-type': 'application/json', 'Accept': 'application/json' };

  test("should return Onboarding Model", () async {
    final response = Response(
        requestOptions: RequestOptions(
            path: 'gfh',
          baseUrl: "fgh"
        ),
        data: RecipeMock()

    );
    when(dio.get(
        "https://food2fork.ca/api/recipe/search"))
        .thenAnswer((_) async => response);

    final result = await service.getRecipe();
    expect(result, isA<Recipe>());

  });
}

Answer 1

I believe you can't Mock the models ... instead, you can use JSON to decode it and use it as a Mock the API result.

class MockDio extends Mock implements Dio {}

const resultJson = '''[
    {
      "userId": 1,
      "id": 1,
      "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
      "body": "quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto"
    },
    {
      "userId": 1,
      "id": 2,
      "title": "qui est esse",
      "body": "est rerum tempore vitae sequi sint nihil reprehenderit dolor beatae ea dolores neque fugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis qui aperiam non debitis possimus qui neque nisi nulla"
    }
  ]''';

final decodedJson = jsonDecode(resultJson);
void main() {
  late PostRepository postRepository;
  late MockDio mockDio;

  setUp(() {
    mockDio = MockDio();
    postRepository = PostRepository(mockDio);
  });

  group("PostRepository : Success", () {
    test("get all posts", () async {
      when(() => mockDio.get(any())).thenAnswer(
        (_) async => Response(
            requestOptions: RequestOptions(path: '/posts'),
            statusCode: 200,
            data: decodedJson),
      );

      final result = await postRepository.getPosts();
      expect(result, isA<List<PostModel>>());
      expect(result.length, 2);
    });
});

Answer 2

You should use https://pub.dev/packages/http_mock_adapter package to help you mock your DIO requests

See its example https://github.com/lomsa-dev/http-mock-adapter/blob/main/example/main.dart :

void main() async {
  late Dio dio;
  late DioAdapter dioAdapter;

  Response<dynamic> response;

  group('Accounts', () {
    const baseUrl = 'https://example.com';

    const userCredentials = <String, dynamic>{
      'email': 'test@example.com',
      'password': 'password',
    };

    setUp(() {
      dio = Dio(BaseOptions(baseUrl: baseUrl));
      dioAdapter = DioAdapter(dio: dio);
    });

    test('signs up user', () async {
      const route = '/signup';

      dioAdapter.onPost(
        route,
        (server) => server.reply(201, null),
        data: userCredentials,
      );

      // Returns a response with 201 Created success status response code.
      response = await dio.post(route, data: userCredentials);

      expect(response.statusCode, 201);
    });

...

  final dioError = DioError(
    error: {'message': 'Some beautiful error!'},
    requestOptions: RequestOptions(path: path),
    response: Response(
      statusCode: 500,
      requestOptions: RequestOptions(path: path),
    ),
    type: DioErrorType.response,
  );

  test("should return a DioError", () async {
    dioAdapter.onGet(
        path,
            (server) {
          server.throws(404, dioError );
        });
    final result = await service.getOnboardingAnswer("lastAnswerId");
    expect(result, throwsA(isA<DioError>()));
  });
}
  });