Ошибка типа компонента Jest Testing React: Мутация не является функцией

Question

Использование Jest-тестирования для реактивного компонента. Я хочу проверить сообщение на наличие мутации. Мутация запускается событием onclick кнопки. Поэтому я вызвал функцию с мутацией внутри. Он работает на веб-сайте, но когда я пишу модульный тест для этого компонента с помощью Jest, он не работает. Я взял ссылку из этого - https://www.apollographql.com/docs/react/development-testing/testing/ https://github.com/apollographql/apollo-client/issues/6452

Получение ошибки

TypeError: xMutation не является функцией

  178 |     onResumeState = () => {
  179 |         const { xMutation } = this.props;
> 180 |         xMutation().then(({ data }) => {
      |         ^
  181 |             const { x: { success } } = data;
  182 |             if (success) {
  183 |                 this.setState({ playState: true });

x.запрос. js

export const xMutation = gql`
    mutation xMutation($xId: String!) {
        y(xId: $xId){
        ...on SuccessActionResponse {
            z{
            id
            }
            message
            success
        }
        ...on ErrorResponse{
            message
            success
        }
        }
    }
`;

export const xMutationParams = {
    options: props => (
        {
            variables: {
                xId: props.xId,
            },
            refetchQueries: () => [{
                query: getxQuery,
                fetchPolicy: 'network-only',
                variables: {
                    id: props.xId,
                },
            }],
        }
    ),
    name: 'xMutation',
};

x.test. js

const mocks = [
    {
        request: {
            query: xMutation,
            fetchPolicy: 'network-only',
            variables: { xId: 'eb1bcc5c-9f17-409c-8b23-356c5523b5f0' },
        },
        result: {
            data: {
                xData: {
                    id: 2,
                    yId: 2,
                },
                message: 'Resumed Successfully',
                success: true,
            },
        },
    },
];

describe('X component', () => {
    const { headerData } = defaultProps;
    render(
        <MockedProvider mocks={mocks} addTypename={false}>
            <StatusTab {...headerData} />
        </MockedProvider>,
    );

    test('should render pause/play state', async () => {
            const linkText = 'yyy';
            expect(screen.getByText(`(${linkText})`)).toBeInTheDocument();
            // await new Promise(resolve => setTimeout(resolve, 0));
            await act(async () => {
                fireEvent.click(screen.getByText(`(${linkText})`));
            });
        }
    });
});

x.jsx

onResumeState = () => {
        const { xMutation } = this.props;
        xMutation().then(({ data }) => {
            const { x: { success } } = data;
            if (success) {
                this.setState({ playState: true });
            }
        });
    }

Answer 1

Я новичок в этом и поэтому все испортил. Для этого мне не нужно было использовать Mocked Provider. Смог работать только с фиктивной функцией. Вот обновленный x.test.jsx, который работает -

const defaultProps = {
    headerData: {
        ..., // Different props
        // Added mock function
        xMutation: jest.fn().mockImplementation(
            () => Promise.resolve({ data: { xAssignment: { success: true } } }),
        ),
    },
};

describe('StatusTab component', () => {
    const { headerData } = defaultProps;
    render(<StatusTab {...headerData} />);

    test('should render pause/play state', async () => {
        expect(screen.getByText(`(${resumeText})`)).toBeInTheDocument();
        expect(screen.getByLabelText(`${xText}`)).toBeDisabled();
        await act(async () => {
            fireEvent.click(screen.getByText(`(${resumeText})`));
        });
        expect(screen.getByText(`(${pausedText})`)).toBeInTheDocument();
        expect(screen.getByLabelText(`${xText}`)).not.toBeDisabled();
    });
});

Если вы хотите использовать мутации graphql apollo в шутку, это хорошая ссылка - https://www.apollographql.com/docs/react/development-testing/testing/