Jest: npm run test not working with node_modules that use ES6 import syntax

[gruckion]

Hey there! Ignite Bowser seems to be having a problem, eh?

Welllllll, it just might be. First, search the issues to make sure it's not already here, and if not head over to http://community.infinite.red to get some help. If you've identified that it's really an Ignite Bowser issue, then:

• Explain what's going on and preferably how to replicate the issue (bonus points for a repro app)
• Run ignite doctor and paste the result below, including the lines with 3 backticks
• Delete these instructions! We don't want to look at them. ;)

---

What's going on?

Trying to create unit tests but npm run test is not successful due to. node_modules dependency containing ES6 imports.

Steps to reproduce

1. npm install a dependency that has an ES6 module syntax (graphql)
2. run npm run test,
3. Expect the unit tests to pass, instead I got;

> jest

 PASS   iOS  app/services/api/api-problem.test.ts (6.863s)
 PASS   Android  app/services/api/api-problem.test.ts (6.847s)
 PASS   iOS  app/utils/storage/storage.test.ts (6.922s)
 PASS   Android  app/utils/storage/storage.test.ts (6.919s)
 PASS   Android  test/i18n.test.ts (6.93s)
 PASS   iOS  test/i18n.test.ts (6.955s)
 PASS   iOS  app/models/extensions/with-status.test.ts (6.977s)
 PASS   Android  app/models/extensions/with-status.test.ts (6.988s)
 FAIL   iOS  app/models/current-user/current-user.test.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/stephen.rayner/workdir/my-project/node_modules/graphql/error/GraphQLError.mjs:9
    import { printError } from './printError';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module
        at compileFunction (<anonymous>)

      at Runtime._execModule (node_modules/jest-runtime/build/index.js:1157:58)
      at Object.<anonymous> (node_modules/@aws-amplify/api-graphql/src/GraphQLAPI.ts:13:1)

 FAIL   Android  app/models/current-user/current-user.test.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/stephen.rayner/workdir/my-project/node_modules/graphql/error/GraphQLError.mjs:9
    import { printError } from './printError';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module
        at compileFunction (<anonymous>)

      at Runtime._execModule (node_modules/jest-runtime/build/index.js:1157:58)
      at Object.<anonymous> (node_modules/@aws-amplify/api-graphql/src/GraphQLAPI.ts:13:1)

 FAIL   Android  test/storyshots.test.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/stephen.rayner/workdir/my-project/node_modules/node-fetch/lib/index.mjs:1
    import Stream from 'stream';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module
        at compileFunction (<anonymous>)

      at Runtime._execModule (node_modules/jest-runtime/build/index.js:1157:58)
      at Object.<anonymous> (node_modules/@storybook/core/dist/server/build-dev.js:31:41)

 FAIL   iOS  test/storyshots.test.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/stephen.rayner/workdir/my-project/node_modules/node-fetch/lib/index.mjs:1
    import Stream from 'stream';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module
        at compileFunction (<anonymous>)

      at Runtime._execModule (node_modules/jest-runtime/build/index.js:1157:58)
      at Object.<anonymous> (node_modules/@storybook/core/dist/server/build-dev.js:31:41)

Test Suites: 4 failed, 8 passed, 12 total
Tests:       44 passed, 44 total
Snapshots:   0 total
Time:        29.367s
Ran all test suites in 2 projects.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-project@0.0.1 test: `jest`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the my-project@0.0.1 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/stephen.rayner/.npm/_logs/2021-01-25T14_17_27_857Z-debug.log

---

ignite doctor results:

➜  my-project git:(feature/auth-screens-formik) ✗ ignite doctor                          
System
  platform           darwin                                                      
  arch               x64                                                         
  cpu                12 cores        Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz    
  directory          my-project   /Users/stephen.rayner/workdir/my-project 

JavaScript
  node               12.19.0      /usr/local/bin/node 
  npm                6.14.8       /usr/local/bin/npm  
  yarn               1.22.10      /usr/local/bin/yarn 

Ignite
  ignite-cli           3.5.3              /usr/local/bin/ignite                        
  ignite src           build              /usr/local/lib/node_modules/ignite-cli/build 
  navigation           react-navigation                                                
  generators                                                                           
                       component          ignite-ir-boilerplate                        
                       model              ignite-bowser                                
                       navigator          ignite-bowser                                
                       screen             ignite-ir-boilerplate                        
                       add                ignite-cli                                   
                       attach             ignite-cli                                   
                       doctor             ignite-cli                                   
                       easter             ignite-cli                                   
                       help               ignite-cli                                   
                       ignite             ignite-cli                                   
                       info               ignite-cli                                   
                       list               ignite-ir-boilerplate                        
                       new                ignite-cli                                   
                       plugin             ignite-cli                                   
                       remove             ignite-cli                                   
                       search             ignite-cli                                   
                       spork              ignite-cli                                   
                       container          ignite-ir-boilerplate                        
                       listview           ignite-ir-boilerplate                        
                       redux              ignite-ir-boilerplate                        
                       saga               ignite-ir-boilerplate                        
  createdWith          3.5.3                                                           
  boilerplate          ignite-bowser                                                   
  boilerplateVersion   5.4.1                                                           

Android
  java               1.8.0_265    /usr/bin/java 
  android home       -            undefined     

iOS
  xcode              12.3       
  cocoapods          1.10.0       /usr/local/bin/pod 

[gruckion]

In package.json adding graphql to the transformIgnorePatterns doesn't appear to resolve the issue.

  "jest": {
    "projects": [
      {
        "preset": "jest-expo/ios",
        "transformIgnorePatterns": [
          "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|native-base|@storybook|graphql)"
        ]
      },
      {
        "preset": "jest-expo/android",
        "transformIgnorePatterns": [
          "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|native-base|@storybook|graphql)"
        ]
      }
    ]
  },