Tuesday, May 14, 2024
Homepage · typescript
 Popular · Latest · Hot · Upcoming
193
rated 0 times [  195] [ 2]  / answers: 1 / hits: 101771  / 5 Years ago, mon, april 22, 2019, 12:00:00

Why does Jest fail with "Unexpected token *" on a simple import statement???


Error log:


Admin@Admin-PC MINGW32 /d/project (master)

$ npm run test



> [email protected] test D:project

> jest



FAIL __tests__/App-test.tsx

  ? 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:



    D:projectnode_modulesreact-navigation-tabssrcnavigatorscreateBottomTabNavigator.js:3

    import * as React from 'react';

           ^



    SyntaxError: Unexpected token *



      14 | // );

      15 |

    > 16 | export default createBottomTabNavigator({

         |                ^

      17 |   map: {

      18 |     screen: MapView,

      19 |     navigationOptions: {



      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)

      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)

      at Object.get createBottomTabNavigator [as createBottomTabNavigator] (node_modules/react-navigation-tabs/src/index.js:9:12)

      at Object.<anonymous> (src/app/main.view.tsx:16:16)



FAIL src/component/reinput/example/__tests__/index.ios.js (19.352s)

  ? Console



    console.error node_modules/react-native/Libraries/YellowBox/YellowBox.js:59

      Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.



  ? renders correctly



    Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.



      at invariant (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:55:15)

      at createFiberFromTypeAndProps (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2054:11)

      at createFiberFromElement (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2075:15)

      at reconcileSingleElement (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4605:23)

      at reconcileChildFibers (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4662:35)

      at reconcileChildren (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6329:28)

      at updateHostRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6741:5)

      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7566:14)

      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11234:12)

      at workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11266:24)



FAIL src/component/reinput/example/__tests__/index.android.js (19.365s)

  ? Console



    console.error node_modules/react-native/Libraries/YellowBox/YellowBox.js:59

      Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.



  ? renders correctly



    Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.



      at invariant (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:55:15)

      at createFiberFromTypeAndProps (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2054:11)

      at createFiberFromElement (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2075:15)

      at reconcileSingleElement (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4605:23)

      at reconcileChildFibers (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4662:35)

      at reconcileChildren (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6329:28)

      at updateHostRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6741:5)

      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7566:14)

      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11234:12)

      at workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11266:24)



Test Suites: 3 failed, 3 total

Tests:       2 failed, 2 total

Snapshots:   0 total

Time:        22.774s

Ran all test suites.

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! [email protected] test: `jest`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the [email protected] 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!     C:UsersAdminAppDataRoamingRoamingnpm-cache_logs2019-04-22T11_52_36_984Z-debug.log

package.json file:


{

  "name": "MyApp",

  "version": "0.0.1",

  "private": true,

  "scripts": {

    "start": "node node_modules/react-native/local-cli/cli.js start",

    "test": "jest"

  },

  "dependencies": {

    "react": "16.8.3",

    "react-native": "0.59.4",

    "react-native-gesture-handler": "^1.1.0",

    "react-native-reanimated": "^1.0.1",

    "react-native-splash-screen": "^3.2.0",

    "react-navigation": "^3.8.1",

    "react-navigation-tabs": "^2.1.1"

  },

  "devDependencies": {

    "@babel/core": "^7.4.3",

    "@babel/runtime": "^7.4.3",

    "@types/jest": "^24.0.11",

    "@types/react": "^16.8.13",

    "@types/react-dom": "^16.8.4",

    "@types/react-native": "^0.57.46",

    "@types/react-test-renderer": "^16.8.1",

    "babel-jest": "^24.7.1",

    "jest": "^24.7.1",

    "metro-react-native-babel-preset": "^0.53.1",

    "react-test-renderer": "16.8.3",

    "typescript": "^3.4.3"

  },

  "jest": {

    "preset": "react-native"

  }

}

babel.config.js file:


module.exports = {

  presets: ['module:metro-react-native-babel-preset'],

};

jest.config.js file:


module.exports = {

  preset: 'react-native',

  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],

}

Note: I am using react-native type-script template, like react-native init MyApp --template typescript


More From » typescript
 Answers
11

Some react-native libraries ship uncompiled ES6 code.


ES6 code needs to be compiled before it can be run by Jest.


The Jest doc about Testing React Native Apps includes a section about compiling dependencies that don't ship pre-compiled code.


You will need to tell Jest to compile react-navigation-tabs by whitelisting it in the transformIgnorePatterns option in your Jest config.


Example:


Changing the jest.config.js file into something like below, fixed the issue mentioned in OP.


But the react-native-reanimated module (which requires native integration) needs further work, and we should "Mock" modules with such native requirements (as described in another post).


module.exports = {

  preset: 'react-native',

  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],

  transformIgnorePatterns: [

    "node_modules/(?!(react-native"

      + "|react-navigation-tabs"

      + "|react-native-splash-screen"

      + "|react-native-screens"

      + "|react-native-reanimated"

    + ")/)",

  ],

}

Note that the transformIgnorePatterns option (which is an array of Regular-Expressions) is originally meant to exclude files from being compiled, but using (?!(some-dir-name|another-name)) pattern, with the "(?!...)" negative look-ahead, we do tell Jest to exclude anything in node_modules directory, except the names that we did specify.


[#52206] Tuesday, April 16, 2019, 5 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
amari
Add To Favorites
Follow
Total Points: 736
Total Questions: 111
Total Answers: 90
Location: Saint Pierre and Miquelon
Member since Fri, Jan 28, 2022
2 Years ago
amari questions
Mon, May 23, 22, 00:00, 2 Years ago
Mon, Jun 21, 21, 00:00, 3 Years ago
Thu, Jun 3, 21, 00:00, 3 Years ago
Sat, May 15, 21, 00:00, 3 Years ago
Wed, Mar 3, 21, 00:00, 3 Years ago
View All
;