Jest not work after migrating to Angular 19.x ( Unexpected token "export" )

[ValentinDEJ]

Bug Report or Feature Request (mark with an x)

• bug report -> please search for issues before submitting
• feature request

Versions.

• keycloak-angular: 19.0.2
• keycloak-js: 26.0.7
• angular: 19.0.6
• jest: 29.7.0

Problems.

The described issue is occurring within an nx-workspace, using the mentioned versions above of angular, jest, keycloak-angular and keycloak-js.

I tried to adapt my jest configuration with suggestion mentionned in this issue but is not work, i have same problem.

The log given by the failure.

 FAIL   authentication  projects/shared/authentication/web/src/ensure-authenticated.guard.spec.ts
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /home/valentin/Workspace/poc-csuite-v3/node_modules/keycloak-js/lib/keycloak.js:2
    import { __awaiter } from "tslib";
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import { ActivatedRouteSnapshot, CanActivateFn, RouterStateSnapshot } from '@angular/router';
    > 2 | import { AuthGuardData, createAuthGuard } from 'keycloak-angular';
        | ^
      3 |
      4 | // This is exported only to facilitate testing. It should not be used directly.
      5 | export const internalEnsureAuthenticated = async (_route: ActivatedRouteSnapshot, state: RouterStateSnapshot, authData: AuthGuardData) => {

      at Runtime.createScriptFromCode (../../../node_modules/jest-runtime/build/index.js:1505:14)
      at Object.<anonymous> (../../../node_modules/keycloak-angular/fesm2022/keycloak-angular.mjs:6:22)
      at Object.<anonymous> (web/src/ensure-authenticated.guard.ts:2:1)
      at Object.<anonymous> (web/src/ensure-authenticated.guard.spec.ts:4:1)

jest.config.ts:

export default {
  displayName: 'authentication',
  preset: '../../../jest.preset.js',
  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
  coverageDirectory: '../../../coverage/projects/shared/authentication',
  transform: {
    '^.+\\.(ts|mjs|js|html)$': [
      'jest-preset-angular',
      {
        tsconfig: '<rootDir>/tsconfig.spec.json',
        stringifyContentPathRegex: '\\.(html|svg)$',
      },
    ],
  },
  transformIgnorePatterns: ['node_modules/(?!(.*.mjs$|keycloak.js))'],
  snapshotSerializers: [
    'jest-preset-angular/build/serializers/no-ng-attributes',
    'jest-preset-angular/build/serializers/ng-snapshot',
    'jest-preset-angular/build/serializers/html-comment',
  ],
};

[koscik]

I'm experiencing the same issue. Just come here to report. Glad you did that first

[dvag-carsten-zedler]

Same here..

[ArnaudFlaesch]

It might be more of a problem with keycloak-js rather than keycloak-angular. I use Jest too and encoutered a similar issue. For me downgrading keycloak-js to version 25 solved the issue.

[ash-burns]

transformIgnorePatterns: ['node_modules/(?!(.*.mjs$|keycloak.js))'],
Worked for me.

[dvag-carsten-zedler]

Only downgrading to keycloak-js version 25 via overriding solves this issue. transformIgnorePatterns doesn't help in my case.

[LukasMachetanz]

Just a wild guess if transformIgnorePatterns is not working. Could it be the case that there are multiple configs for Jest in the project, hence that the adjusted configuration is maybe not working / not effective, as it is probably overwritten?

[ValentinDEJ]

For my case, downgrade to keycloak-js 25 solved the problem and transformIgnorePatterns doesn't work but i actualy have multiple jest configuration for respond to @LukasMachetanz

[JuNe98]

I have opened a ticket in the official repo of keycloak: keycloak/keycloak#36522

Maybe we get an official answer there

[bjpe]

Hi, I am experiencing the same problem. What does work for me are the following combinations:

• angular 19, keycloak-angular 19, keycloak-js 25 with or without transformIgnorePatterns
• angular 18, keycloak-angular 16, keycloak-js 26 with transformIgnorePatterns

[Chris2011]

Foe me, this part in my jest.config.ts worked

"moduleNameMapper": {
    "^keycloak.*$": "keycloak-angular/fesm2022/keycloak-angular.mjs",
}

This is also faster than the transformIgnorePattern. After upgrading angular to latest (current 19), and also nx (current 20), the transformIgnorePatterns stopped working for me.

[dvag-carsten-zedler]

@Chris2011 doesn't work for me. Error message:
Could not locate module keycloak-angular mapped as:
keycloak-angular/fesm2022/keycloak-angular.mjs.

Please check your configuration for these entries:
{
  "moduleNameMapper": {
    "/^keycloak.*$/": "keycloak-angular/fesm2022/keycloak-angular.mjs"
  },
  "resolver": undefined
}

[Chris2011]

@dvag-carsten-zedler So maybe we are using different keycloak versions where the folders change. Please check, whether this folder exists in your node_modules folder. If not, try use the correct one.

[arvind-das]

I my case , I had to change the modeResolution from node to bundler in the tsconfig.json . This allowed keycloak-js to be resolved. Earlier , it was not resolving withing the project.

[pct-cclausen]

Setting moduleResolution to bundler for my tsconfig.spec.json did not help alone (but was still necessary to deal with tsc typechecks)

It helped to wrap hide this import import Keycloak from 'keycloak-js'; away in a service, import (and mock) this service in all UI code & tests.

Then use this pattern mentioned above: transformIgnorePatterns: ['node_modules/(?!(.*.mjs$|keycloak.js))'],

[pierre-chevallier357]

What worked for me was to add transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$|keycloak.js)'] in all my jest.config.js files (every modules if any)