render.js

export function renderComponent(component, query, variables) {
    let {loading, error, data} = useQuery(query, {variables});

    if (loading) {
        return null;
    }

    if (error) {
        console.log(error);
    }

    return React.createElement(component, data);
}

test.js

import React from 'react';
import {gql} from '@apollo/client';
import {MockedProvider} from '@apollo/client/testing';
import assert from 'assert';

import {renderComponent} from '../graphql';
import {renderToStringWithData} from '@apollo/client/react/ssr';

const TEST_QUERY = gql`
    {
        getUser(username: "foo") {
            email
        }
    }
`;

function TestComponent(data) {
    return <p>{data.user.email}</p>;
}

function TestRender({component, query, variables}) {
    return renderComponent(component, query, variables);
}

const mocks = [
    {
        request: {
            query: TEST_QUERY,
            variables: {
                username: 'foo',
            },
        },

        result: {
            data: {
                user: {id: '1', email: 'foo@email.com', username: 'foo'},
            },
        },
    },
];

describe('graphql', () => {
    it('renderComponent fetches data for a component', async () => {
        const component = (
            <MockedProvider mocks={mocks} addTypename={false}>
                <TestRender component={TestComponent} query={TEST_QUERY} variables={{username: 'foo'}} />
            </MockedProvider>
        );

        const content = await renderToStringWithData(component);
        // This fails because content = <p></p>
        assert.deepStrictEqual(content, "<p>foo@email.com</p>");
    });
});