ardatan / ardatan/graphql-tools

Vite plugin a la jest-transform for GraphQL?

Open
#5,991 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
5.4k
Forks
830
Avg merge
10h 59m
Merged PRs (30d)
45

Description

**Is your feature request related to a problem? Please describe.**

In Jest, you expose this transformer:

```
transform: {
....
'\\.(gql|graphql)$': '@graphql-tools/jest-transform',
},
```

**Describe the solution you'd like**
I am trying to move our tests from Jest to Vite, but am having trouble. It seems any test that includes GraphQL queries fail. We use
```
"@graphql-codegen/cli": "^5.0.0",
"@graphql-codegen/client-preset": "^4.1.0",
```
to generate types for our queries in integration tests. For example:
```
import { gql } from 'apollo-server-core';
import { GlobalUsersService } from '../__generated__/asset';
import { mockOperation } from './mockOperation';
import {
UserNameQuery,
UserNameQueryVariables,
} from '../__generated__/test-types/graphql';

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 = 'some-email@domain.com';

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

const result = await mockOperation(
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);
});
});

```

**Describe alternatives you've considered**

I hoped the graphql plugin for rollup would solve it, but it didn't :(

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

export default defineConfig(() => ({
plugins: [graphql()],
test: {
globals: true,
environment: 'node',
globalSetup: './src/globalJestSetup.ts',
reporters: ['verbose'],
include: ['./src/**/*.{test,spec}.ts'],
},
}));

```

Contributor guide

Open the contributing guide

Research direction

Start with the Vitest configuration shown in the issue and inspect how the existing @rollup/plugin-graphql integration handles GraphQL imports. Reproduce the failure with the provided integration-test pattern, then define completion as GraphQL query imports compiling and the tests passing under Vite/Vitest with behavior comparable to the Jest transformer.

Written by the indexing model from the issue text.

Assessment

Tech stack
graphql, rollup, typescript, vite
Domain
testing, tooling
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.