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

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 git@github.com: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

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 1
  • Comments: 18 (4 by maintainers)

Commits related to this issue

Most upvoted comments

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

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.

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

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

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 < notifications@github.com> 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