Amplify-js: Jest issue with aws-amplify-angular.module

[jdavidhermoso]

* Which Category is your question related to? *
aws-amplify-angular
* What AWS Services are you utilizing? *
Congito User pool
* Provide additional details e.g. code snippets *
I am using aws-amplify- angular in a nx project.
I'm using jest with jest-preset-angular for unit test the app.

I'm getting an error that I can reproduce. I created a repo to show the issue:
https://github.com/jdavidhermoso/nx-jest-issue

I know its not a problem with aws-amplify, but maybe someone has faced the same issue.
I'm probably not configuring well jest.
I assume the issue is that aws-amplify-angular is not transpiled, so I need to add babel and transformignorepatterns to Jest configuration.
I tried using babel to transpile aws-amplify-angular following this guide (https://github.com/thymikee/jest-preset-angular#unexpected-token-importexportother), but didn't work.

Thanks in advance, and sorry if it's not the better place to create this issue.

FAIL  apps/myapp/src/app/app.component.spec.ts
  ● Test suite failed to run

    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:
     • 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/hermosoj/Desktop/dev/nx-jest-issue/node_modules/aws-amplify-angular/index.ts:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export { AmplifyAngularModule } from './src/aws-amplify-angular.module';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token export



      at ScriptTransformer._transformAndBuildScript (../../node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
      at Object.<anonymous> (src/app/app.component.ts:169:25)
      at Object.<anonymous> (src/app/app.component.spec.ts:3:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        5.898s
Ran all test suites.

[jdavidhermoso]

Solved. The problem was the tsconfig.spec.json file configuration.

[Fakelzaman]

Hi, What was the configuration you had to set in tsconfig.spec.json? I have the same issue

[jdavidhermoso]

Hi, @Fakelzaman!

I finally set my tsconfig.spec.json like this:

{ "extends": "../../tsconfig.json", "compilerOptions": { "allowJs": true, "outDir": "../out-tsc/spec", "baseUrl": "./", "module": "commonjs", "types": ["jest", "node"], "target": "es5" } }

I hope it helps you!

[outofgamut]

@jdavidhermoso if you have any insights into what I'm doing wrong, your thread is the closest I've found to my issue I'm running into. Any of my test suites that rely on AmplifyService are failing, with an "unable to require '.d.ts' file" error. Any ideas? I already went through adding transformIgnorePatterns into the jest config.

[jdavidhermoso]

Hi, @outofgamut!

I don't have access to the code anymore and I really don't remember how I solved it. I'm sorry. :(

[ErikHDev]

FYI, having the same exact issue with Nrwl and this amplify library "unable to require '.d.ts' file". I was able to fix the " Jest encountered an unexpected token" by adding this into my jest.config file.

transformIgnorePatterns: [ "node_modules/(?!@ngrx|@agm/core|@aws-amplify|aws-amplify-angular)" ],

But now I'm getting the dreaded "d.ts error" that I can seem to fix. I followed the suggestion here and added both

isolatedModules
Set isolatedModules to true in packages/my-app/jest.config.js.

preserveSymlinks
Set preserveSymlinks to true in packages/my-app/tsconfig.json.

But same error. If anyone knows please let me know :)

[mattmbrightside]

Same issue, please help!

`
● Test suite failed to run

Jest encountered an unexpected token

Details:

/node_modules/aws-amplify-angular/index.ts:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export { AmplifyAngularModule } from './src/aws-amplify-angular.module';
                                                                                         ^^^^^^

SyntaxError: Unexpected token export

  2 | import { Auth } from 'aws-amplify';
  3 | import { Router } from '@angular/router';
> 4 | import { AmplifyService } from 'aws-amplify-angular';
    | ^

at ScriptTransformer._transformAndBuildScript (../../node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
at ScriptTransformer.transform (../../node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
at Object. (src/app/app.component.ts:4:1)

`

[bmcilw1]

I'm also seeing the same issue