Mocking hooks for unit testing widgets

[josiahyeow]

Is there a way to mock a hook that's used in a HookWidget?

I want to test the HookWidget independently from the hooks it uses and write a seperate test for the hook itself.

The only solution I could think of is injecting the hooks as props to the Widget, but that kind of defeats the convenience of using hooks.

[rrousselGit]

That isn't a thing and it can't/shouldn't be.

[Joshua-W-Adams]

Heres some sample code of what we are trying to test:

import 'package:flutter/material.dart';
import 'package:flutter_app/domain/agent/agent_bloc.dart';
import 'package:flutter_app/domain/user_analytics/user_analytics_bloc.dart';
import 'package:flutter_app/presentation/agent/widgets/agent_bloc_builder.dart';
import 'package:flutter_app/presentation/core/widgets/common_error.dart';
import 'package:flutter_app/presentation/core/widgets/styled_app_bar.dart';
import 'package:flutter_app/presentation/profile/pages/edit_profile/use_update_profile.dart';
import 'package:flutter_app/presentation/profile/widget/pretty_text_form_field.dart';
import 'package:flutter_app/presentation/profile/widget/save_changes_button.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:provider/provider.dart';

class EditBioPage extends StatefulHookWidget {
  const EditBioPage({Key? key}) : super(key: key);

  @override
  State<EditBioPage> createState() => _EditBioPageState();
}

class _EditBioPageState extends State<EditBioPage> {
  late TextEditingController bio;

  @override
  void initState() {
    super.initState();
    final agentBloc = context.read<AgentBloc>();
    final profile = agentBloc.state.agent?.profile;
    bio = TextEditingController(text: profile?.bio);
  }

  @override
  Widget build(BuildContext context) {
    final navigator = Navigator.of(context);
    final agentBloc = context.read<AgentBloc>();
    final analyticsBloc = context.read<UserAnalyticsBloc>();
    final agentState = Provider.of<AgentState>(context);
    final updateProfile = useUpdateProfile();
    final hasException = updateProfile.mutation.result.hasException;
    final isLoading = updateProfile.mutation.result.isLoading;

    Future<dynamic> saveChanges() async {
      final result = await updateProfile.updateProfile(
        UpdateProfileData(
          agentId: agentState.agentId,
          bio: bio.text,
        ),
      );

      if (result.hasException) {
        return;
      }

      analyticsBloc.add(
        const LogUserAnalyticsEvent(
          name: '[edit bio] bio updated',
        ),
      );
      if (navigator.canPop()) {
        navigator.pop();
      }
      agentBloc.add(const GetAgentEvent());
    }

    return Scaffold(
      appBar: StyledAppBar(
        title: 'Edit bio',
        actions: [
          SaveChangesButton(
            loading: isLoading,
            onPressed: saveChanges,
          ),
        ],
      ),
      body: Container(
        color: Colors.white,
        child: Padding(
          padding: const EdgeInsets.only(
            left: 24,
            right: 24,
            bottom: 0,
          ),
          child: Form(
            child: ListView(
              children: <Widget>[
                const SizedBox(height: 24),
                PrettyTextFormField(
                  labelText: 'Bio',
                  controller: bio,
                  minLines: 4,
                  maxLines: 10,
                  keyboardType: TextInputType.multiline,
                ),
                if (hasException)
                  const Padding(
                    padding: EdgeInsets.only(top: 24),
                    child: CommonError(
                      'We could not save your changes.',
                    ),
                  ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

[rrousselGit]

Unfortunately not, you need to stub the methods in the client aswell (using the Mockito package anyways)

Well it'd be the responsibility of graphql_codegen to make this process simpler.
It's not hooks' job

[Joshua-W-Adams]

well in jest in javascript testing you can mock the contents of an entire import in a file using jest.mock('filepath') I would think we should be able to do the same with flutter imports, in this case an imported hook.

[rrousselGit]

No we can't do this in Dart.

[Joshua-W-Adams]

Alright. Thanks for confirming and all the feedback! :)