Question

我有一个Modal组件，该组件使用<Modal>和useQuery使用可重用的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);

我的问题是我不确定要朝哪个方向参加考试。我想测试加载状态并可能测试mocks的数据，但是谷歌搜索和我缺乏测试知识，这让我有些困惑。到目前为止，这是我的测试：

__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())
    });
});

哪个会登录

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

我不确定从何处开始。我希望能够在加载后测试加载状态和内容，但是看来我什至无法超越<Connect(t) size="md" id="CCPA Modal" />。

否则，我的替代解决方案是只进行快照测试。

有人可以建议如何使用Enzyme / useQuery / useMutation挂钩进行测试吗？子组件加载后如何访问？而且，我不确定如何测试加载状态和数据。

如何测试酶和阿波罗graphql挂钩？

0 个答案: