TypeError: graphql.visit is not a function #7348

guiaramos · 2020-11-20T10:19:29Z

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

The text was updated successfully, but these errors were encountered:

OdysseyJ · 2020-11-20T11:05:40Z

i suffer same problem.

guiaramos · 2020-11-20T11:42:47Z

this issue happened on versio update to 3.2.5, its working on 3.2.4:

problem:
the pr: #7185
the commit: e145a86
at src/utilities/graphql/transform.ts

benjamn · 2020-11-20T14:40:56Z

@guiaramos This appears to be a known issue related to the graphql package's use of the .mjs file extension: graphql/graphql-js#1272. Can you try adding mjs to your moduleFileExtensions, at the beginning of the list (so it takes precedence over js)? If that doesn't fix the problem, please put these snippets of code together into a reproduction so that we can investigate further.

In case you're wondering, reverting #7185 is not an option for the reasons I explained in #7185 (review). Both graphql v14 and v15 export visit and BREAK from the top-level graphql package, so I don't see anything wrong with the way we're importing those exports within @apollo/client.

Just to be sure, though, what version of the graphql package are you using?

guiaramos · 2020-11-21T03:06:34Z

@benjamn thanks for your reply. fully understand the point.

Can you try adding mjs to your moduleFileExtensions, at the beginning of the list (so it takes precedence over js)?

causes the following error:

    Details:

    /Users/guilhermeramos/Desktop/projects.nosync/snuper/web/node_modules/graphql/graphql.mjs:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import isPromise from "./jsutils/isPromise.mjs";
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (node_modules/@apollo/client/utilities/utilities.cjs.js:7:15)

Just to be sure, though, what version of the graphql package are you using?

    "graphql": "15.4.0",

I will create a reproduction soon and post here

zerocewl · 2020-12-11T13:31:08Z

@guiaramos Did you fixed the issue? i get the same error running my tests, which work fine in the version before.

The mentioned workaround

Can you try adding mjs to your moduleFileExtensions, at the beginning of the list (so it takes precedence over js)?

gives me the same SyntaxError

SyntaxError: Cannot use import statement outside a module

guiaramos · 2020-12-14T08:19:55Z

@guiaramos Did you fixed the issue? i get the same error running my tests, which work fine in the version before.

The mentioned workaround

Can you try adding mjs to your moduleFileExtensions, at the beginning of the list (so it takes precedence over js)?

gives me the same SyntaxError

SyntaxError: Cannot use import statement outside a module

@zerocewl I was able to fix the issue by just pin the @apollo/client to version 3.2.4:
@apollo/client: "3.2.4"

zerocewl · 2020-12-16T09:03:32Z

@guiaramos
Obviously pinning the version is not the preferred option ;-)

Did you get a reproduction repo ready?

hwillson · 2021-05-18T13:33:48Z

Let us know if this is still a concern with @apollo/client@latest - thanks!

pulkit110 · 2021-06-29T09:41:37Z

This is still happening on @apollo/client@3.3.2 and graphql@15.5.1 only when running tests using jest. The app and queries otherwise work ok.

paigekim29 · 2021-07-06T23:32:12Z

@pulkit110 i have the same issue. Have you find a way to fix it?

pulkit110 · 2021-07-07T03:55:08Z

@paigekim29 I haven't been able to find a solution for this. Until this is resolved on Apollo, we are stuck with pinning to 3.2.4.

cc @hwillson I believe this is still a concern.

hwillson · 2021-07-07T12:55:29Z

Would someone mind trying things with @apollo/client@beta to see if this still happens? If so, would you mind firing over a small runnable reproduction? Thanks!

pulkit110 · 2021-07-09T11:50:14Z

@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.

hwillson · 2021-07-11T15:36:23Z

Thanks for the repro @pulkit110. I have a feeling this issue is being caused by graphql.macro, not Apollo Client. To test this theory try replacing your use of graphql.macro with direct graphql-tag calls, using the gql function exported from @apollo/client, to see if things then work properly.

pulkit110 · 2021-07-12T06:04:18Z

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.

3pns · 2021-10-09T07:50:15Z

@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.

Deleting the mocks folder fixed it for me, thanks

benjamn · 2021-10-12T16:02:28Z

@pulkit110 We had a similar problem with webpack misresolving graphql to a local graphql.ts module recently: #8862

Are you using webpack? Do you have preferRelative: true enabled, by any chance?

pulkit110 · 2021-10-13T10:36:39Z

Hi @benjamn, thanks for the update. I have tried on the reproduction repository by turning off preferRelative (even though it should have already been off). This does not fix the failing test.

dmarkowski · 2022-09-09T06:34:46Z

@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.

We had a few graphql.js files inside our folders with some our content, after renaming them the problem is gone. Thx @pulkit110

EightArmCode · 2022-11-10T19:42:16Z

Same exact problem here. Could not find exported members from graphql package. After renaming a file in our repo from graphql.ts to _graphql.ts, the problem is fixed 100%.

benjamn mentioned this issue Nov 20, 2020

Avoid all sub-package imports from graphql npm package. #7185

Merged

2 tasks

guiaramos mentioned this issue Jan 13, 2021

import { MockedProvider } from '@apollo/client/testing'; throws error when run with jest #7319

Closed

hwillson closed this as completed May 18, 2021

brainkim added 🔬 testing-utilities 🌹 has-reproduction labels Jul 12, 2021

brainkim reopened this Jul 12, 2021

bignimbus added the 🌤 has-workaround label Nov 10, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TypeError: graphql.visit is not a function #7348

TypeError: graphql.visit is not a function #7348

guiaramos commented Nov 20, 2020 •

edited

Loading

OdysseyJ commented Nov 20, 2020

guiaramos commented Nov 20, 2020

benjamn commented Nov 20, 2020 •

edited

Loading

guiaramos commented Nov 21, 2020

zerocewl commented Dec 11, 2020

guiaramos commented Dec 14, 2020

zerocewl commented Dec 16, 2020

hwillson commented May 18, 2021

pulkit110 commented Jun 29, 2021

paigekim29 commented Jul 6, 2021

pulkit110 commented Jul 7, 2021

hwillson commented Jul 7, 2021

pulkit110 commented Jul 9, 2021

hwillson commented Jul 11, 2021

pulkit110 commented Jul 12, 2021

3pns commented Oct 9, 2021

benjamn commented Oct 12, 2021

pulkit110 commented Oct 13, 2021

dmarkowski commented Sep 9, 2022

EightArmCode commented Nov 10, 2022

TypeError: graphql.visit is not a function #7348

TypeError: graphql.visit is not a function #7348

Comments

guiaramos commented Nov 20, 2020 • edited Loading

OdysseyJ commented Nov 20, 2020

guiaramos commented Nov 20, 2020

benjamn commented Nov 20, 2020 • edited Loading

guiaramos commented Nov 21, 2020

zerocewl commented Dec 11, 2020

guiaramos commented Dec 14, 2020

zerocewl commented Dec 16, 2020

hwillson commented May 18, 2021

pulkit110 commented Jun 29, 2021

paigekim29 commented Jul 6, 2021

pulkit110 commented Jul 7, 2021

hwillson commented Jul 7, 2021

pulkit110 commented Jul 9, 2021

hwillson commented Jul 11, 2021

pulkit110 commented Jul 12, 2021

3pns commented Oct 9, 2021

benjamn commented Oct 12, 2021

pulkit110 commented Oct 13, 2021

dmarkowski commented Sep 9, 2022

EightArmCode commented Nov 10, 2022

guiaramos commented Nov 20, 2020 •

edited

Loading

benjamn commented Nov 20, 2020 •

edited

Loading