Error: Gatsby query was left in the compiled code while testing with vitest

I am working on a Gatsby website and while testing a component with a graphql query using vitest I keep getting this error :

Error: It appears like Gatsby is misconfigured. Gatsby related graphql calls are supposed to only be evaluated at compile time, and then compiled away. Unfortunately, something went wrong and the query was left in the compiled code.

Here is my component :

import React from 'react';
import { graphql } from 'gatsby';
import { Grid } from '@mui/material';

import getTitleNode from 'utils/getters';

import * as styles from './paragraphMoodboard.module.css';

type ImageLegend = {
  image: {
    alt: string;
    url: string;
    imageStyleUri: {
      style_372_x_464: string;
      style_770_x_420: string;
    };
  };
};

type Props = {
  paragraph: {
    imageLegend: Array<ImageLegend>;
    legend: string;
  };
};

export default (props: Props) => {
  const imageFields = props.paragraph?.imageLegend || [];
  const images = imageFields.map(item => {
    return {
      ...item.image?.imageStyleUri,
      alt: item.image?.alt || '',
    };
  });

  return (
    <Grid
      container
      className={styles.moodboardContainer}
      alignItems="center"
      justifyContent="center"
    >
      <Grid item xs={12} className={styles.bigImgContainer1}>
        <img
          className={styles.bigImg}
          src={images[0].style_770_x_420}
          alt={getTitleNode(images[0].alt)}
          loading="lazy"
        />
      </Grid>
      <Grid item xs={12} className={styles.bigImgContainer2}>
        <img
          className={styles.bigImg}
          src={images[3].style_770_x_420}
          alt={getTitleNode(images[3].alt)}
          loading="lazy"
        />
      </Grid>
      <p className={styles.legend}>{props.paragraph.legend}</p>
    </Grid>
  );
};

export const query = graphql`
  fragment ParagraphMoodboard on paragraph__moodboard {
    drupal_internal__id
    internal {
      type
    }
    legend
    imageLegend {
      image {
        url
        alt
        height
        width
        imageStyleUri {
          style_770_x_420
          style_372_x_464
        }
      }
    }
  }
`;

I have a custom render for tests like this :

import React, { FC, ReactElement, ReactNode } from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { render, queries as defaultQueries } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

import rootReducer from 'store/rootReducer';

const customRender = (ui: ReactElement) => {
  const event = userEvent.setup();
  const store = createStore(rootReducer);

  const Wrapper: FC<{ children: ReactNode }> = ({ children }) => {
    return <Provider store={store}>{children}</Provider>;
  };

  return {
    event,
    ...render(ui, {
      wrapper: Wrapper,
      queries: { ...defaultQueries },
    }),
  };
};

export { customRender as render };

And here is my vitest config file :

import { defineConfig } from 'vitest/config';
import path from 'path';
import svgr from 'vite-plugin-svgr';
import nested from 'postcss-nested';

const config = defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
    include: ['src/**/*.test.tsx'],
    setupFiles: ['src/testing/setup.ts'],
    globalSetup: ['src/testing/global.ts'],
  },
  css: { postcss: { plugins: [nested as any] } },
  plugins: [svgr({ exportAsDefault: true })],
});

export default config;

I can provide further informations like my test file or other config files.
Have anyone experienced this issue ?
Thanks for your help