How do I test Enzyme and apollo graphql hooks?

Question

I have a Modal component that uses a reusable <Modal> component using useQuery and useMutation:

const CCPAModal = ({ addNotification, closeModal }: Props): Node => {
    const { data, loading: memberInfoLoading } = useQuery(getMemberInfo, { variables: { id: '1234' } } );
    const [ updateMemberMutation, { loading: updateMemberLoading } ] = useMutation(updateMemberPrivacyPolicyAgreedAt, {
        variables   : { input: { id: data && data.user.member.id } },
        onCompleted : (): void => closeModal(modalIds.ccpaModal),
        onError     : (err): void => addNotification(getFirstError(err), 'error'),
    });

    return (
        <Modal size="md" id={modalIds.ccpaModal}>
            {memberInfoLoading && <LoadingCircle />}
            {!memberInfoLoading && (
                <>
                    <Subtitle>
                        copycopycopy <Link alias="PrivacyPolicy">Privacy Policy</Link>.
                    </Subtitle>
                    <FlexRow justification="flex-end">
                        <Button
                            text="Accept"
                            disabled={updateMemberLoading}
                            onClick={updateMemberMutation}
                        />
                    </FlexRow>
                </>
            )}
        </Modal>
    );
};

const mapDispatchToProps = { addNotification, closeModal };

export default connect(null, mapDispatchToProps)(CCPAModal);

My issue is that I'm not entirely sure in which direction to take my tests. I want to test the loading state and quite possibly test the data of the mocks, but googling and my lack of knowledge of testing in general is leaving me a bit confused. So far this is my test:

__CCPAModal.test.js

import React from 'react';
// import render from 'react-test-renderer';
import { MockedProvider } from '@apollo/react-testing';
import { act } from 'react-dom/test-utils';

import { getMemberInfo } from 'operations/queries/member';

import { CCPAModal } from './CCPAModal';

jest.mock('@project/ui-component');

const mock = {
            request: {
                query: getMemberInfo,
                { variables: { id: '1234' } }
            },
        };

describe('CCPAModal', () => {
    it('mounts', () => {
        const component = mount(
            <MockedProvider
                mocks={[]}
            >
                <CCPAModal />
            </MockedProvider>
        );
        console.log(component.debug())
    });
});

Which will log

<MockedProvider mocks={{...}} addTypename={true}>
      <ApolloProvider client={{...}}>
        <CCPAModal>
          <Connect(t) size="md" id="CCPA Modal" />
        </CCPAModal>
      </ApolloProvider>
    </MockedProvider>

Which I'm unsure where to proceed from here. I wanted to be able to test the loading state and the contents after it loaded, but it doesn't seem I can even get past <Connect(t) size="md" id="CCPA Modal" />.

Otherwise, my alternative solution is to just make snapshot tests.

Can anyone advise on how to test with Enzyme / useQuery / useMutation hooks? How do I access the child components after it loads? And for that matter, I'm unsure how to even test the loading state and data.

How do I test Enzyme and apollo graphql hooks?

0 Answers0