vitest cannot run tests with apollo client query in them

Question

For our GraphQL server, we are trying to move our tests from jest to vitest, but are having issues with our integration tests. They use Apollo Client codegen to generate types for the queries used in the integration tests. An example could look like this:

import { GlobalUsersService } from '../__generated__/asset';
import { mockOperation } from './mockOperation';
import {
  UserNameQuery,
  UserNameQueryVariables,
} from '../__generated__/test-types/graphql';
import { gql } from '../__generated__/test-types/gql';

const userNameQuery = gql(/* GraphQL */ `
  query UserName($emailAddress: String!) {
    user(emailAddress: $emailAddress) {
      ... on User {
        firstName
      }
    }
  }
`);

describe('verification test setup verification', () => {
  it('overrides context defaults', async () => {
    const firstNameMock = 'Svend';
    const emailToQuery = '[email protected]';

    const usersSpy = vi
      .spyOn(GlobalUsersService, 'getGlobalUserByEmailAddress')
      .mockResolvedValue({
        globalUsers: [
          {
            firstName: firstNameMock,
            b2CObjectId: 'someID',
          },
        ],
      });

    const result = await mockOperation<UserNameQuery, UserNameQueryVariables>(
      userNameQuery,
      {
        emailAddress: emailToQuery,
      },
      {
        // Override context.user with signInName to satisfy auth scope
        user: {
          signInName: emailToQuery,
        },
      }
    );

    expect(usersSpy).toHaveBeenCalledTimes(1);

    const { firstName } = result.data.user;

    expect(firstName).toEqual(firstNameMock);
  });
});

Our vitest.config.ts looks like this:

import { defineConfig } from 'vitest/config';
// import graphql from '@rollup/plugin-graphql';

export default defineConfig(() => ({
  // plugins: [graphql()],
  test: {
    // In order to access `vi` in tests without having to import it, as was the practice in Jest
    globals: true,
    environment: 'node',
    globalSetup: './src/globalJestSetup.ts',
    reporters: ['verbose'],
    include: ['./src/**/*.{test,spec}.ts'],
    coverage: {
      include: ['src/**/*'],
      exclude: ['src/__generated__'],
    },
  },
}));

This gives the error

Error: Expression expected
 ❯ getRollupError node_modules/rollup/dist/es/shared/parseAst.js:376:41
 ❯ convertProgram node_modules/rollup/dist/es/shared/parseAst.js:1040:26
 ❯ parseAstAsync node_modules/rollup/dist/es/shared/parseAst.js:2186:12
 ❯ ssrTransformScript node_modules/vite/dist/node/chunks/dep-jvB8WLp9.js:54248:15
 ❯ loadAndTransform node_modules/vite/dist/node/chunks/dep-jvB8WLp9.js:53796:11

If I then introduce the @rollup/plugin-graphql plugin (the outcommented lines added back in and tests rerun), I instead get the following error:

Error: typeDefs must contain only strings, documents, schemas, or functions, got object
 ❯ visitTypeSources node_modules/@graphql-tools/schema/node_modules/@graphql-tools/merge/esm/typedefs-mergers/merge-typedefs.js:61:19
     59| }
     60| export function mergeGraphQLTypes(typeSource, config) {
     61|     var _a, _b, _c;
       |                   ^
     62|     resetComments();
     63|     const allNodes = visitTypeSources(typeSource, config);

Looking at that function:

function visitTypeSources(typeSource, options, allNodes = [], visitedTypeSources = new Set()) {
    if (typeSource && !visitedTypeSources.has(typeSource)) {
        visitedTypeSources.add(typeSource);
        if (typeof typeSource === 'function') {
            visitTypeSources(typeSource(), options, allNodes, visitedTypeSources);
        }
        else if (Array.isArray(typeSource)) {
            for (const type of typeSource) {
                visitTypeSources(type, options, allNodes, visitedTypeSources);
            }
        }
        else if (isSchema(typeSource)) {
            const documentNode = getDocumentNodeFromSchema(typeSource, options);
            visitTypeSources(documentNode.definitions, options, allNodes, visitedTypeSources);
        }
        else if (isStringTypes(typeSource) || isSourceTypes(typeSource)) {
            const documentNode = parse(typeSource, options);
            visitTypeSources(documentNode.definitions, options, allNodes, visitedTypeSources);
        }
        else if (typeof typeSource === 'object' && isDefinitionNode(typeSource)) {
            allNodes.push(typeSource);
        }
        else if (isDocumentNode(typeSource)) {
            visitTypeSources(typeSource.definitions, options, allNodes, visitedTypeSources);
        }
        else {
            console.log(JSON.stringify(typeSource));
            throw new Error(`typeDefs must contain only strings, documents, schemas, or functions, got ${typeof typeSource}`);
        }
    }
    return allNodes;
}

and the console.log I added

{
  "default": {
    "kind": "Document",
    "definitions": [theDefinitionsForTheProject...],
    "loc": {
      "start": 0,
      "end": 4873,
      "source": {
        "body": "enum OurEnums...",
        "name": "GraphQL request",
        "locationOffset": { "line": 1, "column": 1 }
      }
    }
  }
}

the passed object is of kind document, so doesn't hit any of the clauses. Maybe I'm going about it all wrong?

Any ideas on where to go from here would be much appreciated. Is there perhaps another rollup plugin I should use?