Can't import things from @apollo/client with Jest ESM and ts-jest

[themaskedavenger]

Intended outcome:
Import things from apollo client in jest unit tests (ts-jest and esm)

Actual outcome:

import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
  useQuery,
  gql
} from '@apollo/client';

Each of the imports gives an error like SyntaxError: The requested module '@apollo/client' does not provide an export named 'ApolloProvider'. Looking at the @apollo/client's package.json, the "main" key is set to "./main.cjs", which is re-exporting things in cjs style:

var core = require('./core');
var react = require('./react');

for (var k in core) {
	if (k !== 'default' && !exports.hasOwnProperty(k)) exports[k] = core[k];
}
for (var k in react) {
	if (k !== 'default' && !exports.hasOwnProperty(k)) exports[k] = react[k];
}

For some reason I guess this cjs is not recognized with the recommended jest config. To get around it, can directly import the specific exports directly from esm files in the @apollo/client package like this:

import {
  ApolloClient,
  InMemoryCache,
} from '@apollo/client/core';
import { ApolloProvider } from '@apollo/client/react/context/ApolloProvider';
import { useQuery } from '@apollo/client/react/hooks';
import { gql } from 'graphql-tag';

Then there's a new error for a dependency:

/path/to/project/node_modules/ts-invariant/process/index.js:15
    export function install() {
    ^^^^^^

    SyntaxError: Unexpected token 'export'

Adding transformIgnorePatterns to jest config doesn't seem to help:

    "transformIgnorePatterns": [
      "node_modules/(?!(ts-invariant)/)"
    ],

Full jest config:

  "jest": {
    "resetMocks": true,
    "testEnvironment": "node",
    "testMatch": [
      "**/src/**/*.(spec|test).[tj]s?(x)"
    ],
    "preset": "ts-jest/presets/default-esm",
    "transform": {},
    "transformIgnorePatterns": [
      "node_modules/(?!(ts-invariant)/)"
    ],
    "extensionsToTreatAsEsm": [
      ".ts",
      ".tsx"
    ],
    "globals": {
      "ts-jest": {
        "useESM": true
      }
    },
    "moduleNameMapper": {
      "^(\\.{1,2}/.*)\\.js$": "$1"
    }
  }

and tsconfig:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "downlevelIteration": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "jsx": "react",
    "outDir": "build",
    "sourceMap": true,
    "strictNullChecks": true,
    "baseUrl": ".",
    "lib": [
      "ESNext",
      "dom"
    ],
    "moduleResolution": "Node",
    "target": "ESNext",
    "module": "ESNext"
  },
  "include": [
    "src/**/*"
  ]
}

How to reproduce the issue:
Minimal repro: https://github.com/themaskedavenger/jest-esm-apollo-client

Versions
System:
OS: macOS 11.6
Binaries:
Node: 14.17.6 - /usr/local/bin/node
Yarn: 1.22.0 - /usr/local/bin/yarn
npm: 6.14.15 - /usr/local/bin/npm
Browsers:
Chrome: 96.0.4664.55
Edge: 80.0.361.54
Firefox: 89.0.2
Safari: 14.1.2
npmPackages:
@apollo/client: ^3.5.5 => 3.5.5

[tobiasdiez]

At least this part

Looking at the @apollo/client's package.json, the "main" key is set to "./main.cjs"

should be fixed now since there is now a correct module key in the package.json file.

[SkylerRogers]

Hi is this issue resolved? We're experiencing this as well. Thanks

[momenthana]

here. apollographql/apollo-feature-requests#287 (comment)

[alessbell]

Doing some housekeeping and I'll be closing this as a duplicate since it's related to ESM support, thanks!

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
For general questions, we recommend using StackOverflow or our discord server.