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 [e-mail]: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

[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

[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.