Imports from ESM packages fail

🐛 Bug Report

We’ve recently upgraded to Node 14 and we’re looking to remove esm (-r esm, jdalton package) / babel / webpack and run everything natively. We are running a monorepo and all packages got updated with type: "module. Everything works now except for some tests where there’s an error with imports (don’t even know how to call it… double import?)

To Reproduce

We have some simple tests to ensure our schema doesn’t change unintentionally / by mistake.

// Currency.test.js
import { graphql } from "graphql";
import { basename } from "path";

import schema from "../../../schema";

const entity = basename(__filename, ".test.js");

/* eslint-disable no-underscore-dangle */
describe(`"${entity}" regression testing`, () => {
  test(`Fields are as advertised`, async () => {
    const query = `
      query {
        __type(name: "${entity}") {
          name
          fields {
            name
            type {
              kind
              ofType {
                name
                kind
              }
            }
          }
        }
      }
    `;
    const expected = [
      .....
    ];

    const result = await graphql(schema, query);
    expect(result.data.__type.fields).toEqual(expected);
  });
});

// schema.js
import gqlTools from "graphql-tools";
import merge from "lodash/merge.js";

import root from "./root/index.js";
// + other imports in the same manner 

// root/index.js
import definitions from "./definitions.js";
import resolvers from "./resolvers.js";

export default { definitions, resolvers };

// resolvers.js
import moment from "moment";
import gql from "graphql";

const { GraphQLScalarType, Kind, GraphQLError } = gql;

running yarn jest packages/internal-api/src/__tests__/currency/schema/Currency.test.js ends up in error

 FAIL  packages/internal-api/src/__tests__/currency/schema/Currency.test.js
  ● Test suite failed to run

    TypeError: Cannot read property 'GraphQLScalarType' of undefined

      2 | import gql from "graphql";
      3 |
    > 4 | const { GraphQLScalarType, Kind, GraphQLError } = gql;
        |         ^
      5 |

Expected behavior

I’m expecting this to work?

envinfo

  System:
    OS: Linux 4.19 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
  Binaries:
    Node: 14.10.1 - ~/.nvm/versions/node/v14.10.1/bin/node
    Yarn: 1.18.0 - /usr/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v14.10.1/bin/npm

While the code was upgraded to remove any babel dependency jest still runs with the following config

// babel.config.js
module.exports = api => {
  api.cache(true);

  const presets = ["@babel/preset-env", "@babel/preset-react"];
  const plugins = [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    "@babel/plugin-transform-modules-commonjs",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-json-strings",
    [
      "@babel/plugin-proposal-decorators",
      {
        legacy: true,
      },
    ],
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions",
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-logical-assignment-operators",
    "@babel/plugin-proposal-optional-chaining",
    [
      "@babel/plugin-proposal-pipeline-operator",
      {
        proposal: "minimal",
      },
    ],
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-do-expressions",
    "@babel/plugin-proposal-function-bind",
  ];

  return {
    presets,
    plugins,
  };
};

// jest.config.js


module.exports = {
  setupFilesAfterEnv: ["./utils/jestSetup.js"],
  resetMocks: true,
  verbose: true,
  testEnvironment: "node",
  // Only test actual test files
  testMatch: ["**/__tests__/**/(*.)+(spec|test).[jt]s?(x)"],
  testPathIgnorePatterns: ["/node_modules/", "/.history/"],
  reporters: [
    "default",
    ["jest-junit", { output: "reports/js-test-results.xml" }],
  ],
  collectCoverage: false,
  collectCoverageFrom: ["**/*.{js,jsx}", "!**/node_modules/**"],
  coverageReporters: ["json", "html"],
  coverageDirectory: "reports/coverage",
};

[SimenB]

To use ESM in Jest you need run node with --experimental-vm-modules, see https://jestjs.io/docs/en/ecmascript-modules.

If that doesn’t work, please provide a minimal reproduction: https://stackoverflow.com/help/minimal-reproducible-example

[github-actions[bot]]

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. Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.