@aws-amplify/ui-angular AmplifyUIAngularModule is incompatible with Jest

Describe the bug

This is a duplicate of the closed issue https://github.com/aws-amplify/amplify-js/issues/3531.

To Reproduce Work in progress, trying to reproduce outside of nx. See old issue for starting. If you have a preferred way to init a project, add jest, then add AmplifyUIAngularModule I’m happy to do it and post results. My current way is to use nx.

Here’s how to reproduce with nx:

1. Create new project and add @aws-amplify/ui-angular. I’ll use nrwl because it creates a project pre-configured for jest.

   mkdir amplify-jest
   cd amplify-jest
   npx create-nx-workspace test --appName=myapp --preset=angular --nx-cloud=false --style=css --linter=eslint
   npm install @aws-amplify/ui-angular
   cd test
   

2. Run tests ng test. They should be currently passing.

3. Add AmplifyUIAngularModule to app.module.ts

   • Add import { AmplifyUIAngularModule } from '@aws-amplify/ui-angular'; to the top of the file.

   • Add AmplifyUIAngularModule to the imports array imports: [ ... AmplifyUIAngularModule ].

4. Run tests ng test. They should now fail with the error below

Expected behavior

Jest should be able to process the AmplifyUIAngularModule in a TypeScript project.

Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • 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/en/configuration.html

    Details:

    /Users/brianmcilwain/source/ah-applications-nx/node_modules/@aws-amplify/ui-angular/dist/fesm5.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { __decorate, __metadata } from 'tslib';
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      2 | import { CommonModule } from '@angular/common';
      3 | import { TestComponentComponent } from './test-component/test-component.component';
    > 4 | import { AmplifyUIAngularModule } from '@aws-amplify/ui-angular';
        | ^
      5 | 
      6 | @NgModule({
      7 |   imports: [CommonModule, AmplifyUIAngularModule],

• Update: Added steps to reproduce

[wlee221]

Ah I see you already created an issue #887, I’ll communicate there.

[wlee221]

Did you try setting off your strict settings in tsconfig? Looks like it’s related to strict settings with possibly undefined value.