[Bug]: Cannot use import statement outside a module for some esm.js dependencies

Version

12.1.0

Please note this didn’t occured in previous versions of preset / jest 27 but we had to update to keep up with angular 14. Keeping old versions along with angular 14 doesn’t work.

Steps to reproduce

On a repository using firebase dependencies, we cannot run tests anymore since update to latest jest-angular-preset and jest 28. At first we didn’t have much configuration

Initial configuration

jest.config.js

  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/src/setupJest.ts'],
  globalSetup: 'jest-preset-angular/global-setup',

Error

/Users/X/dev/ourApp/node_modules/firebase/compat/auth/dist/index.esm.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import '@firebase/auth-compat';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1773:14)
      at node_modules/@angular/fire/bundles/angular-fire-compat-auth.umd.js:2:85
      at Object.<anonymous> (node_modules/@angular/fire/bundles/angular-fire-compat-auth.umd.js:5:2)

fix attempt using babel

jest.config.js

preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/src/setupJest.ts'],
  globalSetup: 'jest-preset-angular/global-setup',
  transform: {
    '^.+\\.(ts|html)$': 'jest-preset-angular',
    '^.+\\.js$': 'babel-jest',
  },

babel.config.js

module.exports = {
  presets: ['@babel/preset-env'],
  env: {
    test: {
      plugins: ["@babel/plugin-transform-runtime"]
    }
  }
};

Error is the same

/Users/X/dev/ourApp/node_modules/firebase/compat/auth/dist/index.esm.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import '@firebase/auth-compat';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1773:14)
      at node_modules/@angular/fire/bundles/angular-fire-compat-auth.umd.js:2:85
      at Object.<anonymous> (node_modules/@angular/fire/bundles/angular-fire-compat-auth.umd.js:5:2)

Expected behavior

We expect preset to manage transforms for all required files and avoid SyntaxError: Cannot use import statement outside a module error on some js files in node_modules.

Actual behavior

SyntaxError: Cannot use import statement outside a module error on some js files in node_modules.

Additional context

No response

Environment

System:
    OS: macOS 12.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 3.2.0 - ~/.nvm/versions/node/v16.13.1/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  npmPackages:
    jest: 28.1.0 => 28.1.0

[blackholegalaxy]

Using more detailed resolvers, referencing all sub-packages seemed to do the trick on repro repository. I will try to write some docs about this.

Please note in our case we had to remote transformIgnorePatterns entry then cause whitelisting *.mjs package somehow was causing weird errors.

[ahnpnl]

It is the proper way to configure Jest, see troubleshooting guide https://thymikee.github.io/jest-preset-angular/docs/guides/troubleshooting

To improve speed, you can use this https://thymikee.github.io/jest-preset-angular/docs/getting-started/options#processing-with-esbuild