example-apollo.md

id	title	sidebar_label
example-apollo	Apollo	Apollo

import React, { useState } from 'react';
import { gql, useMutation } from 'react-apollo';
import { MockedProvider } from '@apollo/react-testing'
import { Button, TextInput, View } from 'react-native';
import { render, fireEvent, act } from "@testing-library/react-native";
import wait from "waait";

const UPDATE_EMAIL = gql`
    mutation UpdateEmail($email: String!) {
        updateEmail(email: $email) {
            newEmail
        }
    }
`;

function UpdateEmailForm() {
    const [updateEmail, { data }] = useMutation(UPDATE_EMAIL);
    const [email, setEmail] = useState('');

    render() {
        if (data) {
            return (
                <p>Email successfully updated</p>
            )
        };

        return (
            <View>
                <TextInput
                    placeholder="Email"
                    onChangeText={(text) => setEmail({ text })}
                />
                <Button onPress={() => {
                    return updateEmail({
                        variables: {
                            email
                        }
                    })
                }} title="Submit" />
            </View>
        );
    }
}

function renderComponent(mocks = []) {
    return render(
        <MockedProvider mocks={mocks} addTypename={false}>
            <UpdateEmailForm />
        </>
    )
}

describe("UpdateEmailForm", () => {
    it("should update my email", async () => {
        jest.useRealTimers();

        const { getByPlaceholderText, getByText, queryByText } = renderComponent();

        const emailInput = getByPlaceholderText("Email");
        const sendLinkButton = getByText("update my email");

        fireEvent.changeText(emailInput, "[email protected]");
        fireEvent.pressOut(sendLinkButton);

        await act(async () => {
            await wait(0);
        });

        expect(queryByText(/Email successfully updated/)).toBeTruthy();
    });
});