Jest échoue avec "Jeton inattendu *" sur l'instruction d'importation

Question

Pourquoi Jest échoue avec "Jeton inattendu *" sur une simple instruction d'importation ???

Journal des erreurs :

Admin@Admin-PC MINGW32 /d/project (master)
$ npm run test

> MyApp@0.0.1 test D:\project
> jest

ÉCHEC __tests__/App-test.tsx
  ? L'exécution de la suite de tests a échoué

    Jest a rencontré un jeton inattendu

    Cela signifie généralement que vous essayez d'importer un fichier que Jest ne peut pas analyser, par exemple s'il ne s'agit pas de JavaScript pur.

    Par défaut, si Jest détecte une configuration Babel, il l'utilisera pour transformer vos fichiers, en ignorant les "node_modules".

    Voici ce que vous pouvez faire :
     • Pour que certains de vos fichiers "node_modules" soient transformés, vous pouvez spécifier une "transformIgnorePatterns" personnalisée dans votre configuration.
     • Si vous avez besoin d'une transformation personnalisée, spécifiez une option de "transform" dans votre configuration.
     • Si vous voulez simplement simuler vos modules non-JS (par exemple, les ressources binaires), vous pouvez les remplacer avec l'option de configuration "moduleNameMapper".

    Vous trouverez plus de détails et d'exemples de ces options de configuration dans la documentation :
    https://jestjs.io/docs/en/configuration.html

    Détails :

    D:\project\node_modules\react-navigation-tabs\src\navigators\createBottomTabNavigator.js:3
    import * as React from 'react';
           ^

    SyntaxError: Jeton inattendu *

      14 | // );
      15 |
    > 16 | export default createBottomTabNavigator({
         |                ^
      17 |   map: {
      18 |     screen: MapView,
      19 |     navigationOptions: {

      à ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
      à ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
      à Object.get createBottomTabNavigator [as createBottomTabNavigator] (node_modules/react-navigation-tabs/src/index.js:9:12)
      à Object. (src/app/main.view.tsx:16:16)

ÉCHEC src/component/reinput/example/__tests__/index.ios.js (19.352s)
  ? Console

    console.error node_modules/react-native/Libraries/YellowBox/YellowBox.js:59
      Avertissement : React.createElement : le type n'est pas valide -- on attendait une chaîne (pour les composants intégrés) ou une classe/fonction (pour les composants composites) mais on a obtenu : objet. Vous avez probablement oublié d'exporter votre composant du fichier où il est défini, ou vous avez peut-être mélangé les importations par défaut et nommées.

  ? s'affiche correctement

    Violation de l'invariant : le type d'élément n'est pas valide : on attendait une chaîne (pour les composants intégrés) ou une classe/fonction (pour les composants composites) mais on a obtenu : objet. Vous avez probablement oublié d'exporter votre composant du fichier où il est défini, ou vous avez peut-être mélangé les importations par défaut et nommées.

      à invariant (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:55:15)
      à createFiberFromTypeAndProps (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2054:11)
      à createFiberFromElement (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2075:15)
      à reconcileSingleElement (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4605:23)
      à reconcileChildFibers (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4662:35)
      à reconcileChildren (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6329:28)
      à updateHostRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6741:5)
      à beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7566:14)
      à performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11234:12)
      à workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11266:24)

ÉCHEC src/component/reinput/example/__tests__/index.android.js (19.365s)
  ? Console

    console.error node_modules/react-native/Libraries/YellowBox/YellowBox.js:59
      Avertissement : React.createElement : le type n'est pas valide -- on attendait une chaîne (pour les composants intégrés) ou une classe/fonction (pour les composants composites) mais on a obtenu : objet. Vous avez probablement oublié d'exporter votre composant du fichier où il est défini, ou vous avez peut-être mélangé les importations par défaut et nommées.

  ? s'affiche correctement

    Violation de l'invariant : le type d'élément n'est pas valide : on attendait une chaîne (pour les composants intégrés) ou une classe/fonction (pour les composants composites) mais on a obtenu : objet. Vous avez probablement oublié d'exporter votre composant du fichier où il est défini, ou vous avez peut-être mélangé les importations par défaut et nommées.

      à invariant (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:55:15)
      à createFiberFromTypeAndProps (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2054:11)
      à createFiberFromElement (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2075:15)
      à reconcileSingleElement (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4605:23)
      à reconcileChildFibers (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4662:35)
      à reconcileChildren (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6329:28)
      à updateHostRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6741:5)
      à beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7566:14)
      à performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11234:12)
      à workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11266:24)

Suites de tests : 3 échouées, 3 au total
Tests : 2 échoués, 2 au total
Snapshots : 0 au total
Temps : 22.774s
Toutes les suites de tests ont été exécutées.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! MyApp@0.0.1 test: `jest`
npm ERR! Statut de sortie 1
npm ERR!
npm ERR! Échec de l'exécution du script MyApp@0.0.1 test.
npm ERR! Ce n'est probablement pas un problème avec npm. Il y a probablement des journaux supplémentaires ci-dessus.

npm ERR! Un journal complet de cette exécution est disponible dans :
npm ERR!     C:\Users\Admin\AppData\Roaming\Roaming\npm-cache\_logs\2019-04-22T11_52_36_984Z-debug.log

Fichier package.json :

{
  "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"
  }
}

Fichier babel.config.js :

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

Fichier jest.config.js :

module.exports = {
  preset: 'react-native',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
}

Remarque : J'utilise le modèle type-script react-native, comme react-native init MyApp --template typescript

Answer 1

Je utilise react-native-web et la solution pour mon problème était d'ajouter le react-native-web préréglage à mon jest.config.js:

module.exports = {
transform: {
  '^.+\\.tsx?$': 'ts-jest',
},
timers: 'fake',
testPathIgnorePatterns: [
  '/build/',
  '/node_modules/',
  '/rndemo/build/',
],
globals: {
  'ts-jest': {
    diagnostics: {
      warnOnly: true,
    },
  },
},
preset: 'react-native-web',
}

Answer 2

Modifier babel.config.js comme ci-dessous a fonctionné pour moi. De plus, les presets doivent venir en premier, puis tous les autres configs.

    module.exports = {
       presets: [['@babel/preset-env',{targets: {node: 
         'current',},loose:true,},],],
    }