Amplify-js: Jest fails when importing withAuthenticator from aws-amplify-react-native

[josephbridgwaterrowe]

Describe the bug
When attempting to include the withAuthenticator HOC component in a new Expo application the existing Jest tests fail with Jest encountered an unexpected token.

Please note, this behavior is observed prior to implementing the withAuthenticator component.

To Reproduce
I have created a new app demonstrating this behavior, the changes necessary to exhibit this behavior are in this PR: https://github.com/josephbridgwaterrowe/amplify-and-jest-sample/pull/3

Steps to reproduce the behavior:

1. git clone [email protected]:josephbridgwaterrowe/amplify-and-jest-sample.git
2. cd amplify-and-jest-sample
3. git checkout 1-amplify-and-jest-fail-redux
   
   
   
   • No relation to Redux, it just occurred to me that this naming may cause confusion... my apologies.
   
   
4. npm install
5. npm test

 ~/Development/Personal/amplify-and-jest-sample   1-amplify-and-jest-fail  npm test                                                                              ✔  10175  10:08:58

> @ test /Users/josephbridgwaterrowe/Development/Personal/amplify-and-jest-sample
> node ./node_modules/jest-expo/bin/jest.js

 PASS  components/__tests__/StyledText-test.js
 FAIL  __tests__/App-test.js
  ● 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/josephbridgwaterrowe/Development/Personal/amplify-and-jest-sample/node_modules/aws-amplify-react-native/dist/index.js:14
    import { default as AmplifyCore, I18n } from 'aws-amplify';
           ^

    SyntaxError: Unexpected token {

      3 | import { AppLoading, Asset, Font, Icon } from 'expo';
      4 | import AppNavigator from './navigation/AppNavigator';
    > 5 | import { withAuthenticator } from 'aws-amplify-react-native'
        |                              ^
      6 |
      7 | export default class App extends React.Component {
      8 |   state = {

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.<anonymous> (App.js:5:30)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 passed, 1 total
Snapshots:   1 passed, 1 total
Time:        3.412s, estimated 6s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

Expected behavior
I expect the test suite to complete with success.

Screenshots
Not applicable.

Desktop:

• OS: Mac OS Mojave 10.14.2

Smartphone:

• Not applicable

Additional context
None

[josephbridgwaterrowe]

I'm now almost certain that this has something to do with babel or environment setup, but I'm not exactly sure where to look.

I've been looking up issues related to Babel, Expo, and Jest setup to no avail... I will continue looking, but it would be great if someone could provide me with a shortcut to a solution. :smile:

[JustFly1984]

@josephbridgwaterrowe This is definitely related to missing @babel/plugin-proposal-class-properties
https://www.npmjs.com/package/@babel/plugin-proposal-class-properties Missing in your .babelrc

[josephbridgwaterrowe]

Thanks @JustFly1984,

I added this to my .babelrc file and tried again, but I received the same error. Although I think this was already being included by the modified Jest preprocessor file.

Can you confirm that the code in that preprocessor is in fact including that plugin for transformations?

From what I can tell, the aws-amplify-react-native code was not transformed when it was built into the dist folder (well, it doesn't appear to be "plain JavaScript").

So, in an effort to address this I modified my transformIgnorePatterns to include aws-amplify-react-native which ended up with a new ReferenceError: dict is not defined error:

 PASS  components/__tests__/StyledText-test.js
 FAIL  __tests__/App-test.js
  ● Test suite failed to run

    ReferenceError: dict is not defined

      3 | import { AppLoading, Asset, Font, Icon } from 'expo';
      4 | import AppNavigator from './navigation/AppNavigator';
    > 5 | import { withAuthenticator } from 'aws-amplify-react-native'
        |                              ^
      6 |
      7 | export default class App extends React.Component {
      8 |   state = {

      at Object.<anonymous> (node_modules/aws-amplify-react-native/dist/AmplifyI18n.js:14:6)
      at Object.<anonymous> (App.js:5:30)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 passed, 1 total
Snapshots:   1 passed, 1 total
Time:        3.544s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

My new package.json, adding a transformIgnorePatterns based upon jest-preset to include aws-ampliy-react-native (along with some other packages that raised Jest errors).

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject",
    "test": "node_modules/.bin/jest"
  },
  "jest": {
    "preset": "jest-expo",
    "transform": {
      "\\.js$": "<rootDir>/jest.preprocessor.js"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!((jest-)?react-native|react-clone-referenced-element|expo(nent)?|@expo(nent)?/.*|@react-navigation|react-navigation|sentry-expo|aws-amplify-react-native))"
    ]
  },
  "dependencies": {
    "@expo/samples": "2.1.1",
    "aws-amplify": "^1.1.19",
    "aws-amplify-react-native": "^2.1.7",
    "expo": "^32.0.0",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-navigation": "^3.0.9"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0",
    "jest-expo": "^32.0.0"
  },
  "private": true
}

[springcoil]

I run into that exact error too.

[josephbridgwaterrowe]

Hi @springcoil,

Are you experiencing the Jest encountered an unexpected token or ReferenceError: dict is not defined error?

I'd like to try and determine if my changes made above to get to ReferenceError: dict is not defined were correct, and I should continue debugging that error or not.

Thanks.

[springcoil]

Hi Joseph,
I am indeed experiencing that error.
ᐧ

On Mon, Feb 25, 2019 at 11:42 PM Joseph Bridgwater-Rowe <
[email protected]> wrote:

Hi @springcoil https://github.com/springcoil,

Are you experiencing the Jest encountered an unexpected token or ReferenceError:
dict is not defined error?

I'd like to try and determine if my changes made above to get to ReferenceError:
dict is not defined were correct, and I should continue debugging that
error or not.

Thanks.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/aws-amplify/amplify-js/issues/2686#issuecomment-467230220,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA8DiIxLijbzpIgyHyBH1eTT0Qs57cD3ks5vRHTMgaJpZM4a0zyr
.

--
Peadar Coyle
Interested in levelling up your Machine Learning skills? Here is my
Probabilistic
Programming Primer https://probabilisticprogrammingprimer.podia.com/!!!
Skype: springcoilarch
www.twitter.com/springcoil
peadarcoyle.wordpress.com

[josephbridgwaterrowe]

Thanks @springcoil

I'm going to assume you're referring to the ReferenceError: dict is not defined error. Once I get some more time I'm going to try and determine what is the cause.

[springcoil]

I'm going to assume you're referring to the ReferenceError: dict is not defined error. Once I get some more time I'm going to try and determine what is the cause. -- Yes this is true.
ᐧ

On Wed, Feb 27, 2019 at 3:33 PM Joseph Bridgwater-Rowe <
[email protected]> wrote:

I'm going to assume you're referring to the ReferenceError: dict is not
defined error. Once I get some more time I'm going to try and determine
what is the cause.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/aws-amplify/amplify-js/issues/2686#issuecomment-467908437,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA8DiG0MFlNaMV-zC-t31C5VLcsBDmavks5vRqVOgaJpZM4a0zyr
.

--
Peadar Coyle
Interested in levelling up your Machine Learning skills? Here is my
Probabilistic
Programming Primer https://probabilisticprogrammingprimer.podia.com/!!!
Skype: springcoilarch
www.twitter.com/springcoil
peadarcoyle.wordpress.com

[chiubaka]

I'm having a similar issue, but in a slightly different context. In my case, I'm using haul as my React Native packager, and as soon as I add the withAuthenticator import, I start seeing either invalid character errors or ReferenceError: dict is not defined errors.

Sounds to me like haul also doesn't transpile node_modules by default, so I think these issues are related. If you've found a solution, I'd be curious to know what it was...

[josephbridgwaterrowe]

@chiubaka is this happening when using Jest or without?

[chiubaka]

Mine is not a Jest bug--just a similar issue with trying to get a third-party tool to crunch aws-amplify-react-native's untranspiled code.

[brookemitchell]

As @chiubaka said this is because aws-amplify-react-native is untranspiled. You can fix this by adding it's regex to transformIgnorePatterns, https://jestjs.io/docs/en/tutorial-react-native#transformignorepatterns-customization.

If using a jest preset like jest-expo or react-native you might want to look up the regex you are over-riding to keep existing compilation

[ProdigySim]

Did anyone find a resolution for this? I've been trying a number of configurations, but seem to always either get the

SyntaxError: Unexpected token {

or

ReferenceError: dict is not defined

This is the call stack from the dict error:

      at Object.<anonymous> (node_modules/aws-amplify-react-native/dist/AmplifyI18n.js:14:6)
      at Object.<anonymous> (node_modules/aws-amplify-react-native/dist/index.js:15:55)
      at Object.<anonymous> (my-code/stuff/Authenticator.tsx:5:1)

Which suggests that the export default dict statement in AmplifyI18n.js is the issue.

[ProdigySim]

I managed to alleviate the error by changing

export default identifier = { ... }

with

export default { ... }

in aws-amplify-react-native/dist/*.js.

I'm not sure why my jest/node setup fails to parse that syntax, but it looks like it's a rarer form of export default AssignmentExpression. The name dict definite is never delcared, so it might be a strict-mode issue or something. No clue.

[DWboutin]

I ran into the same error!

node_modules/aws-amplify-react-native/dist/AmplifyI18n.js
node_modules/aws-amplify-react-native/dist/AmplifyI18n.js:14
  11 |  * and limitations under the License.
  12 |  */
  13 | 
> 14 | export default dict = {
  15 |     'fr': {
  16 |         'Loading...': "S'il vous plaît, attendez",
  17 |         'Sign In': "Se connecter",

Not with Jest. I use Expo and my component render, but I can't see it. I opened my app on the web and it shows me that error. How can I get rid of this?

<Authenticator
            authState={this.state.authState}
            hideDefault={true}
            onStateChange={this.handleStateChange}
          >

This is the only thing I use with AWS-Amplify on my react-native app aside Auth calls.

Thank you!

[ProdigySim]

I submitted #3102 a while ago if a contributor on this project has time to review.

In the meantime, I've added a very janky npm postinstall script to my project to alleviate the issue for myself: https://gist.github.com/ProdigySim/3a09b4b9b2d662b4cc338f4328697b05

[sammartinez]

In looking at #3102, I see it being merged. Closing this issue as that PR resolves it.