[React SDK] testing mutations

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

Here’s the component

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

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

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.'),
            <ThemeProvider theme={defaultTheme}>
                <MockedProvider mocks={[mockMutation]}>
                    <SubmitForm {...(mockErrorData as any)} />

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

        userEvent.type(inputField, mockNewMessage);

        await waitFor(() => {
                    /sorry, there was a problem submitting your message/i

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.

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