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

Certaines bibliothèques react-native sont livrées avec du code ES6 non compilé.

Le code ES6 doit être compilé avant de pouvoir être exécuté par Jest.

La documentation de Jest sur les Tests des applications React Native inclut une section sur la compilation des dépendances qui ne fournissent pas de code pré-compilé.

Vous devrez indiquer à Jest de compiler react-navigation-tabs en l'autorisant dans l'option transformIgnorePatterns de votre configuration Jest.

Exemple :

En modifiant le fichier jest.config.js comme ci-dessous, le problème mentionné dans le post initial a été résolu.

Mais le module react-native-reanimated (qui nécessite une intégration native) nécessite davantage de travail, et nous devrions "Mocker" les modules avec de telles exigences natives (comme décrit dans un autre 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"
    + ")/)",
  ],
}

Notez que l'option transformIgnorePatterns (qui est un tableau d'expressions régulières) est initialement destinée à exclure des fichiers de la compilation, mais en utilisant le modèle (?!(some-dir-name|another-name)), avec le négatif look-ahead "(?!...)", nous disons à Jest d'exclure tout ce qui se trouve dans le répertoire node_modules, sauf les noms que nous avons spécifiés.

Answer 2

Comme il a été dit, certains modules doivent être transpilés et d'autres non. Voici une regex que j'utilise qui fonctionne dans de nombreux projets

  "jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-(native|universal|navigation)-(.*)|@react-native-community/(.*)|@react-navigation/(.*)|bs-platform|(@[a-zA-Z]+/)?(bs|reason|rescript)-(.*)+)"
    ]
  }

Cela fonctionne pour la plupart des choses communes à React Native, et inclut également un package spécifique (ici bs-platform) par exemple, qui n'est pas capturé par les motifs précédents.

Answer 3

J'ai rencontré un problème similaire sur une application React + Typescript.

La première erreur que j'ai commise était de définir le jest.config.js comme jest.config.ts

En cours d'exécution sur Node v12. dernière version

Ensuite, les configurations qui ont fonctionné pour moi étaient les suivantes :

// jest.config.js

module.exports = {
  preset: "ts-jest",
  testEnvironment: "node",
  roots: ["./src"],
  transform: { "\\.ts$": ["ts-jest"] },
  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
  globals: {
    "ts-jest": {
      tsConfig: {
        // allow js in typescript
        allowJs: true,
      },
    },
  },
};

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "baseUrl": "."
  },
  "include": ["src"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

// package.json
"devDependencies": {
    "@types/jest": "^26.0.5",
    "jest": "^26.1.0",
    "ts-jest": "^26.1.3"
}

Answer 4

Si vous utilisez non seulement React Native mais aussi Expo, j'ai résolu le même problème mais pour les composants Expo en suivant le guide officiel, Testing with Jest. Installez spécifiquement via le gestionnaire de packages le préréglage jest jest-expo, puis mettez à jour mon package.json comme ils le décrivent:

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

J'ai également dû ajouter à la fin de la chaîne regexp transformIgnorePatterns une exception pour |.*font.* car les polices Expo étaient celles qui me posaient problème. Probablement j'aurais pu le rendre un peu plus spécifique, mais je déteste les regex, et cela a fonctionné alors je l'ai laissé tel quel!

Answer 5

Quelque part dans votre fichier de configuration (.babelrc.js ou package.json), vous devez avoir "modules" sous "presets" défini sur l'un des "amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false.

voir ce fragment de la documentation

quelque chose comme ceci:

    "presets": [
  [
    "@babel/preset-env", {
      "targets": process.env.BABEL_TARGET === 'node' ? {
        "node": 'current'
      } : {
        "browsers": [ "last 2 versions" ]
      },
      "loose": true,
      "modules": 'commonjs'
    }
  ]
]