Angular Jest test cases got failed after updating the aws-amplify to version 4.3.46 from 3.4.3

[goku7995]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Angular

Amplify APIs

Authentication

Amplify Version

4.3.46

Amplify Categories

auth

Backend

Amplify CLI

Environment information

 System:
    OS: Windows 11 10.0.22621
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 3.12 GB / 15.41 GB
  Binaries:
    Node: 21.6.2 - C:\Program Files\nodejs\node.EXE
    npm: 10.4.0 - ~\AppData\Roaming\npm\npm.CMD
  Browsers:
    Edge: Chromium (121.0.2277.128)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @angular-devkit/build-angular: ^17.2.0 => 17.2.0
    @angular/animations: ^17.2.1 => 17.2.1
    @angular/cdk: ^16.2.0 => 16.2.14
    @angular/cli: ^17.2.0 => 17.2.0
    @angular/common: ^17.2.1 => 17.2.1
    @angular/compiler: ^17.2.1 => 17.2.1 (9.0.0)
    @angular/compiler-cli: ^17.2.1 => 17.2.1
    @angular/compiler/testing:  undefined ()
    @angular/core: ^17.2.1 => 17.2.1 (9.0.0)
    @angular/core/testing:  undefined ()
    @angular/forms: ^17.2.1 => 17.2.1
    @angular/http: ^7.2.16 => 7.2.16
    @angular/http/testing:  undefined ()
    @angular/language-service: ^17.2.1 => 17.2.1
    @angular/material: ^13.3.9 => 13.3.9
    @angular/material/autocomplete:  undefined ()
    @angular/material/autocomplete/testing:  undefined ()
    @angular/material/badge:  undefined ()
    @angular/material/badge/testing:  undefined ()
    @angular/material/bottom-sheet:  undefined ()
    @angular/material/bottom-sheet/testing:  undefined ()
    @angular/material/button:  undefined ()
    @angular/material/button-toggle:  undefined ()
    @angular/material/button-toggle/testing:  undefined ()
    @angular/material/button/testing:  undefined ()
    @angular/material/card:  undefined ()
    @angular/material/card/testing:  undefined ()
    @angular/material/checkbox:  undefined ()
    @angular/material/checkbox/testing:  undefined ()
    @angular/material/chips:  undefined ()
    @angular/material/chips/testing:  undefined ()
    @angular/material/core:  undefined ()
    @angular/material/core/testing:  undefined ()
    @angular/material/datepicker:  undefined ()
    @angular/material/datepicker/testing:  undefined ()
    @angular/material/dialog:  undefined ()
    @angular/material/dialog/testing:  undefined ()
    @angular/material/divider:  undefined ()
    @angular/material/divider/testing:  undefined ()
    @angular/material/expansion:  undefined ()
    @angular/material/expansion/testing:  undefined ()
    @angular/material/form-field:  undefined ()
    @angular/material/form-field/testing:  undefined ()
    @angular/material/form-field/testing/control:  undefined ()
    @angular/material/grid-list:  undefined ()
    @angular/material/grid-list/testing:  undefined ()
    @angular/material/icon:  undefined ()
    @angular/material/icon/testing:  undefined ()
    @angular/material/input:  undefined ()
    @angular/material/input/testing:  undefined ()
    @angular/material/list:  undefined ()
    @angular/material/list/testing:  undefined ()
    @angular/material/menu:  undefined ()
    @angular/material/menu/testing:  undefined ()
    @angular/material/paginator:  undefined ()
    @angular/material/paginator/testing:  undefined ()
    @angular/material/progress-bar:  undefined ()
    @angular/material/progress-bar/testing:  undefined ()
    @angular/material/progress-spinner:  undefined ()
    @angular/material/progress-spinner/testing:  undefined ()
    @angular/material/radio:  undefined ()
    @angular/material/radio/testing:  undefined ()
    @angular/material/select:  undefined ()
    @angular/material/select/testing:  undefined ()
    @angular/material/sidenav:  undefined ()
    @angular/material/sidenav/testing:  undefined ()
    @angular/material/slide-toggle:  undefined ()
    @angular/material/slide-toggle/testing:  undefined ()
    @angular/material/slider:  undefined ()
    @angular/material/slider/testing:  undefined ()
    @angular/material/snack-bar:  undefined ()
    @angular/material/snack-bar/testing:  undefined ()
    @angular/material/sort:  undefined ()
    @angular/material/sort/testing:  undefined ()
    @angular/material/stepper:  undefined ()
    @angular/material/stepper/testing:  undefined ()
    @angular/material/table:  undefined ()
    @angular/material/table/testing:  undefined ()
    @angular/material/tabs:  undefined ()
    @angular/material/tabs/testing:  undefined ()
    @angular/material/toolbar:  undefined ()
    @angular/material/toolbar/testing:  undefined ()
    @angular/material/tooltip:  undefined ()
    @angular/material/tooltip/testing:  undefined ()
    @angular/material/tree:  undefined ()
    @angular/material/tree/testing:  undefined ()
    @angular/platform-browser: ^17.2.1 => 17.2.1
    @angular/platform-browser-dynamic: ^17.2.1 => 17.2.1
    @angular/platform-server: ^17.2.1 => 17.2.1
    @angular/router: ^17.2.1 => 17.2.1
    @angular/ssr: ^17.2.0 => 17.2.0
    @ng-toolkit/serverless: ^8.1.0 => 8.1.0
    @ng-toolkit/universal: ^8.1.0 => 8.1.0
    @nguniversal/module-map-ngfactory-loader: 8.1.1 => 8.1.1
    @types/express: ^4.17.17 => 4.17.21
    @types/jest: ^28.1.7 => 28.1.8
    @types/jquery: ^3.5.16 => 3.5.29
    @types/node: ^16.11.43 => 16.18.82 (18.16.1)
    aws-amplify: ^4.3.46 => 4.3.46
    aws-sdk: ^2.601.0 => 2.1560.0
    aws-serverless-express: ^3.4.0 => 3.4.0
    babel-jest: ^29.3.1 => 29.7.0
    browser-sync: ^3.0.0 => 3.0.2
    codelyzer: ^6.0.2 => 6.0.2
    core-js: ^3.25.5 => 3.36.0 (2.6.12)
    cors: ~2.8.5 => 2.8.5
    cp-cli: ^2.0.0 => 2.0.0
    cross-env: 7.0.2 => 7.0.2
    domino: ^2.1.6 => 2.1.6
    ejs: ^3.1.8 => 3.1.9
    example-typescript:  1.0.0
    express: ^4.18.2 => 4.18.2
    fs: 0.0.1-security => 0.0.1-security
    fs-extra: 9.0.1 => 9.0.1 (9.1.0, 3.0.1, 7.0.1, 10.1.0)
    hammerjs: ^2.0.8 => 2.0.8
    jest: ^29.4.3 => 29.7.0
    jest-preset-angular: ^13.0.0 => 13.1.6
    jquery: ^3.5.1 => 3.7.1
    localstorage-polyfill: ^1.0.1 => 1.0.1
    ng-lazyload-image: ^7.1.0 => 7.1.0
    ngx-cookie: ^6.0.1 => 6.0.1
    ngx-scanner-qrcode: ^1.2.9 => 1.6.9
    opencollective: ^1.0.3 => 1.0.3
    openwhisk-java:  1.0.0
    openwhisk-ruby:  1.0.0
    parentpackage:  1.0.0
    protractor: ~7.0.0 => 7.0.0
    raw-loader: ^4.0.2 => 4.0.2
    rxjs: ^7.5.7 => 7.8.1 (6.4.0, 6.6.7)
    rxjs/ajax:  undefined ()
    rxjs/fetch:  undefined ()
    rxjs/internal-compatibility:  undefined ()
    rxjs/operators:  undefined ()
    rxjs/testing:  undefined ()
    rxjs/webSocket:  undefined ()
    serverless: ^3.31.0 => 3.38.0
    serverless-api-compression: ^1.0.1 => 1.0.1
    serverless-apigw-binary: ^0.4.4 => 0.4.4
    serverless-associate-waf: ^1.2.1 => 1.2.1
    serverless-google-hello-world:  0.1.0
    serverless-offline: ^5.12.1 => 5.12.1
    serverless-openwhisk-hello-world:  0.1.0
    sha1: ^1.1.1 => 1.1.1
    testpackage:  1.0.0
    ts-jest: ^29.0.3 => 29.1.2
    ts-loader: ^4.2.0 => 4.5.0
    ts-node: ~9.1.1 => 9.1.1
    tslib: ^2.4.0 => 2.6.2 (1.14.1)
    tslint: ~5.15.0 => 5.15.0
    typescript: ^5.3.3 => 5.3.3
    web-animations-js: ^2.3.2 => 2.3.2
    webpack: ^5.88.2 => 5.90.3 (5.90.1)
    webpack-cli: ^5.1.4 => 5.1.4
    zone.js: ^0.14.3 => 0.14.4 (0.10.3)
  npmGlobalPackages:
    @angular/cli: 17.1.1
    json-server: 0.17.1
    npm: 10.4.0

Describe the bug

We are using aws-amplify version 3.4.3 for authentication recently we upgraded the Angular application to version 17. For that Angular 17 it needs aws-amplify version to latest because we are facing graphql error while build the application.

Sow we updated to aws-amplify version to 4.3.46 after updating we are facing issue while running npm run test test .

Expected behavior

On aws-amplify version 3.4.3 all the test cases are passed without failing

Reproduction steps

Copy paste the above app.component.ts file in any angular application and run npm run test.

Code Snippet

import { Component, OnInit } from '@angular/core';
import { Auth } from 'aws-amplify';
import { BffService } from './providers/bff.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private bff : BffService) {}
  validUser = true

  ngOnInit() {
    this.checkUserStatus()
  }

  checkUserStatus(){
    Auth.currentAuthenticatedUser().then(user=>{
      this.bff.getUserPermission(user.attributes.email).subscribe({
        next: (res) => {
          this.validUser = res.validUser
        },
        error: (error) => {
          console.log(error,'error')
        }
      })
    }).catch(error=>{
      Auth.federatedSignIn()
    })
  }

  logoutUser(){
    Auth.signOut({ global: true }).then().catch((error) => {
      console.log('error signing out: ', error);
    });
  }

}

Log output

 FAIL  src/app/common/components/kiosk/kiosk-scan-qr/kiosk-scan-qr.component.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:

    C:\Users\gokulakrishnan.k\Angular App\events-kiosk\node_modules\@aws-sdk\client-lex-runtime-service\node_modules\uuid\dist\esm-browser\index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { default as v1 } from './v1.js';
                                                                                      ^^^^^^

    SyntaxError: Unexpected token 'export'

      3 | import { environment } from '../../environments/environment';
      4 | import { BehaviorSubject, catchError, throwError } from 'rxjs';
    > 5 | import { Auth } from 'aws-amplify';
        | ^
      6 |
      7 |
      8 | @Injectable({

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14)
      at Object.<anonymous> (node_modules/@aws-sdk/client-lex-runtime-service/node_modules/@aws-sdk/middleware-retry/dist-cjs/StandardRetryStrategy.js:6:16)
      at Object.<anonymous> (node_modules/@aws-sdk/client-lex-runtime-service/node_modules/@aws-sdk/middleware-retry/dist-cjs/AdaptiveRetryStrategy.js:6:33)
      at Object.<anonymous> (node_modules/@aws-sdk/client-lex-runtime-service/node_modules/@aws-sdk/middleware-retry/dist-cjs/index.js:4:22)
      at Object.<anonymous> (node_modules/@aws-sdk/client-lex-runtime-service/dist-cjs/LexRuntimeServiceClient.js:9:28)
      at Object.<anonymous> (node_modules/@aws-sdk/client-lex-runtime-service/dist-cjs/LexRuntimeService.js:9:35)
      at Object.<anonymous> (node_modules/@aws-sdk/client-lex-runtime-service/dist-cjs/index.js:5:22)
      at Object.<anonymous> (node_modules/@aws-amplify/interactions/src/Providers/AWSLexProvider.ts:20:1)
      at Object.<anonymous> (node_modules/@aws-amplify/interactions/src/Providers/index.ts:13:1)
      at Object.<anonymous> (node_modules/@aws-amplify/interactions/src/Interactions.ts:21:1)
      at Object.<anonymous> (node_modules/@aws-amplify/interactions/src/index.ts:13:1)
      at Object.<anonymous> (node_modules/aws-amplify/src/index.ts:45:1)
      at Object.require (src/app/providers/bff.service.ts:5:1)
      at Object.<anonymous> (src/app/common/components/kiosk/kiosk-scan-qr/kiosk-scan-qr.component.spec.ts:5:1)

aws-exports.js

not applicable

Manual configuration

not applicable

Additional configuration

not applicable

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

sdfds

[nadetastic]

Hi @goku7995 thank you for opening this issue. I had a question to ask - it sounds like you are working to update to the latest version of aws-amplify however you specifically mention v4.3.46. To be clear, the latest major version of aws-amplify is v6.x.x - have you tried upgrading to this instead?

[nadetastic]

@goku7995 following up on this. Let me know if you are having issues when trying to upgrade to the latest major version of aws-amplify

[nadetastic]

Hi 👋 Closing this issue as we have not heard back from you. If you are still experiencing this, please feel free to reply back and provide any information previously requested and we'd be happy to re-open the issue.

Thank you!