[React SDK] testing mutations

Help
,
1

Hi I have a form component that I would like to test.

Here’s the component

    const [submitMessage, { loading, error }] = useMutation(MESSAGE_MUTATION);
    return (
        <form
            onSubmit={event => {
                event.preventDefault();
                const target = event.currentTarget[1] as HTMLTextAreaElement;

                submitMessage({
                    variables: {
                        SendMessageInput: {
                            body: target.value,
                            threadId: threadId,
                            senderId: userId,
                            recipientId: recipient.userId,
                            subject: '',
                        },
                    },
                });
            }}
        >
            <fieldset>
                <label htmlFor="input">Compose message</label>
                <input type="text" id="input" />
            </fieldset>
            <button type="submit">Send message {loading && <Spinner />}</button>
    </form>
)

Here’s the test so far:


    it('should render the error state UI', async () => {
        const mockErrorData = {
            threadId: null,
            userId: 1,
            recipients: [
                {
                    userId: 123,
                    contact: {
                        title: 'Mrs',
                        forename: 'Molly',
                        middlename: 'Gertrude',
                        surname: 'Bloom',
                    },
                },
                {
                    userId: 321,
                    contact: {
                        title: 'Mr',
                        forename: 'Stephen',
                        middlename: 'Paul',
                        surname: 'Dedalus',
                    },
                },
            ],
        };
        const mockMutation = {
            request: {
                query: MESSAGE_MUTATION,
                variables: {
                    SendMessageInput: {
                        body: mockNewMessage,
                        threadId: mockErrorData.threadId,
                        senderId: mockErrorData.recipients[0].userId,
                        recipientId: mockErrorData.recipients[1].userId,
                        subject: '',
                    },
                },
            },
            response: mockErrorData,
            error: new Error('Drat.'),
        };
        render(
            <ThemeProvider theme={defaultTheme}>
                <MockedProvider mocks={[mockMutation]}>
                    <SubmitForm {...(mockErrorData as any)} />
                </MockedProvider>
            </ThemeProvider>
        );

        const inputField = screen.getByLabelText(/compose message/i);
        const button = screen.getByText('Send message');

        userEvent.type(inputField, mockNewMessage);
        fireEvent.click(button);

        await waitFor(() => {
            expect(
                screen.getByText(
                    /sorry, there was a problem submitting your message/i
                )
            ).toBeInTheDocument();
        });
    });

I’m consistently getting the error Error: Uncaught [TypeError: Cannot read property 'value' of undefined]. I’ve changed the input from uncontrolled to controlled but it doesn’t seem to improve the situation … some articles seem to indicate it’s because there’s an unmocked API, could that be the case here?

The component and mutation work fine in manual testing.

2

I solved it by using a controlled input and passing directly the value of the controlled input to the submitMessage() function