1

我有一个 Modal 组件，它使用和使用可重用<Modal>组件：useQueryuseMutation

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 hooks 进行测试？加载后如何访问子组件？就此而言，我甚至不确定如何测试加载状态和数据。

4

0 回答 0