TypeError: graphql.visit is not a function

Intended outcome:

We are trying to mock the graphql for teting with jest on NextJS

Actual outcome:

We are getting the following error:

    TypeError: graphql.visit is not a function

      29 |   // });
      30 |   it('test', async () => {
    > 31 |     TestRenderer.create(
         |                  ^
      32 |       <MockedProvider mocks={mocks}>
      33 |         <Test />
      34 |       </MockedProvider>

      at removeDirectivesFromDocument (node_modules/@apollo/client/utilities/graphql/transform.js:39:40)
      at Object.removeConnectionDirectiveFromDocument (node_modules/@apollo/client/utilities/graphql/transform.js:147:12)
      at MockLink.Object.<anonymous>.MockLink.normalizeMockedResponse (node_modules/@apollo/client/utilities/testing/mocking/mockLink.js:86:38)
      at MockLink.Object.<anonymous>.MockLink.addMockedResponse (node_modules/@apollo/client/utilities/testing/mocking/mockLink.js:29:45)
      at node_modules/@apollo/client/utilities/testing/mocking/mockLink.js:23:23
          at Array.forEach (<anonymous>)
      at new MockLink (node_modules/@apollo/client/utilities/testing/mocking/mockLink.js:22:29)
      at new MockedProvider (node_modules/@apollo/client/utilities/testing/mocking/MockedProvider.js:15:27)
      at constructClassInstance (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3629:18)
      at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7558:5)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9043:16)
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12649:12)
      at workLoopSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12622:22)
      at performSyncWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12333:9)
      at node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1825:24
      at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:653:12)
      at runWithPriority (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1775:10)
      at flushSyncCallbackQueueImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1820:7)
      at flushSyncCallbackQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1808:3)
      at scheduleUpdateOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11776:9)
      at updateContainer (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14747:3)
      at Object.create (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15455:5)
      at src/features/Task/components/Task/__tests__/Task.test.tsx:31:18
      at step (node_modules/tslib/tslib.js:141:27)
      at Object.next (node_modules/tslib/tslib.js:122:57)
      at node_modules/tslib/tslib.js:115:75
      at Object.__awaiter (node_modules/tslib/tslib.js:111:16)
      at Object.<anonymous> (src/features/Task/components/Task/__tests__/Task.test.tsx:30:14)

How to reproduce the issue:

Our files:

Task.test.tsx

import * as React from 'react';
import Test from '@features/Task/components/Task/Test';
import { MockedProvider } from '@apollo/client/testing';
import TestRenderer from 'react-test-renderer';
import { AmIBossDocument } from '@generated/server/graphql';

const mocks = [
  {
    request: {
      query: AmIBossDocument
    },
    result: {
      data: { amIBoss: true }
    }
  }
];

describe('Features', () => {
  it('test', async () => {
    TestRenderer.create(
      <MockedProvider mocks={mocks}>
        <Test />
      </MockedProvider>
    );
  });
});

test.tsx

import { useAmIBossQuery } from '@generated/server/graphql';
import React from 'react';

type TestProps = {};

const Test: React.FC<TestProps> = () => {
  const { loading, error, data } = useAmIBossQuery();
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error!</p>;
  return <div>{data?.amIBoss}</div>;
};

export default Test;

AmIBossDocument

export const AmIBossDocument = gql`
  query amIBoss {
    amIBoss
  }
`;

jest.config.js

module.exports = {
  roots: ['<rootDir>'],
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/__mocks__/styleMock.js',
    '\\.(css|less|scss)$': '<rootDir>/__mocks__/styleMock.js',
    '^@commons/(.*)': '<rootDir>/src/commons/$1',
    '^@components/(.*)': '<rootDir>/src/components/$1',
    '^@features/(.*)': '<rootDir>/src/features/$1',
    '^@libraries/(.*)': '<rootDir>/src/libraries/$1',
    '^@contexts/(.*)': '<rootDir>/src/contexts/$1',
    '^@styles/(.*)': '<rootDir>/styles/$1',
    '^@generated/(.*)': '<rootDir>/generated/$1',
    '^@graphql/(.*)': '<rootDir>/graphql/$1'
  },
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': 'ts-jest'
  },
  transformIgnorePatterns: ['/node_modules/', '<rootDir>/node_modules/'],
  testMatch: ['**/__tests__/*.ts?(x)', '**/?(*.)+(spec|test).ts?(x)'],
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
  globals: {
    'ts-jest': {
      tsConfig: '<rootDir>/tsconfig.jest.json'
    }
  },
  moduleDirectories: ['node_modules', 'src', 'styles', 'generated', 'graphql']
};

jest.setup.js

import '@testing-library/jest-dom/extend-expect';

tsconfig.jest.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "jsx": "react"
  }
}

Versions

NextJS 9.4.0

System:
    OS: macOS 11.0.1
  Binaries:
    Node: 14.5.0 - /usr/local/bin/node
    Yarn: 1.22.10 - ~/Documents/snuper/web_app/node_modules/.bin/yarn
    npm: 6.14.8 - ~/Documents/snuper/web_app/node_modules/.bin/npm
  Browsers:
    Chrome: 86.0.4240.198
    Safari: 14.0.1
  npmPackages:
    @apollo/client: 3.2.5 => 3.2.5
    apollo: ^2.27.3 => 2.31.0
    apollo-link-logger: ^1.2.3 => 1.2.3
    apollo-link-timeout: ^1.4.1 => 1.4.1
    apollo-link-token-refresh: ^0.3.2 => 0.3.2
    apollo-link-ws: ^1.0.20 => 1.0.20
    next-with-apollo: 5.1.0 => 5.1.0

[pulkit110]

Thanks for checking this out @hwillson. I tried without graphql.macro and have the same error. I have created a repo for the reproduction so that it is easy to check out. Please let me know if you have any other questions.

[pulkit110]

@hwillson Here is a repro.

Longer version: While trying to create a repo, I noticed that it doesn’t happen on a brand new project.

After some digging, it seems that I had a mock named graphql.ts (not at the root, but nested, for example at core/__mocks__). Just having this file (with empty content) in the filesystem even without any other file accessing this or manually activating this was what was causing this issue. And I confirm that this does not happen on @apollo/client <= 2.2.4.

I still think this is something that is caused by something that changed on Apollo (or a dependency) because the a custom mock nested inside a project should not interfere with the global graphql package. At the very least, this should be documented somewhere.

Workaround for now: Check that you don’t have any mocks named graphql (even nested) and rename if there are.