Jest: Jest a rencontré un jeton inattendu avec l'application React

J'ai le même probléme.

Même problème ici.

même problème ici .. légèrement plus compliqué car je travaille avec un monorepo.

@fabioSalimbeni @hoaiduyit @mikedloss J'ai fait passer mes tests React et React Native ( Jest et enzyme ) dans un monorepo Lerna en utilisant Babel 7.

Vous devez utiliser la nouvelle configuration Babel avec babel.config.js si vous travaillez dans un monorepo : https://babeljs.io/docs/en/v7-migration.

Voici mon babel.config.js pour la racine du monorepo :

module.exports = {
    overrides: [
        {
            test: 'platforms/webApp1',
            extends: 'platforms/webApp1/babel.config.js'
        },
        {
            test: 'platforms/webApp2',
            extends: 'platforms/webApp2/babel.config.js'
        }
    ]
};

Voici à quoi ressemble mon babel.config.js pour webApp1 une des applications monorepo :

module.exports = {
    env: {
        test: {
            presets: [
                [
                    '@babel/preset-env',
                    {
                        modules: 'commonjs',
                        debug: false
                    }
                ],
                '@babel/preset-flow',
                '@babel/preset-react'
            ],
            plugins: [
                '@babel/plugin-syntax-dynamic-import',
                '@babel/plugin-proposal-class-properties'
            ]
        },
        production: {
            presets: [
                ['@babel/preset-env', { modules: false }],
                '@babel/preset-flow',
                '@babel/preset-react'
            ],
            plugins: [
                '@babel/plugin-syntax-dynamic-import',
                '@babel/plugin-proposal-class-properties'
            ]
        },
        development: {
            presets: [
                ['@babel/preset-env', { modules: false }],
                '@babel/preset-flow',
                '@babel/preset-react'
            ],
            plugins: [
                '@babel/plugin-syntax-dynamic-import',
                '@babel/plugin-proposal-class-properties'
            ]
        }
    }
};

Et voici la configuration Jest :

    "jest": {
        "verbose": true,
        "clearMocks": true,
        "collectCoverage": true,
        "setupTestFrameworkScriptFile": "<rootDir>/config/setupTest.js",
        "transform": {
            "^.+\\.js$": "babel-jest"
        },
        "moduleNameMapper": {
            "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
            "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js"
        }
    }

setupTest.js ressemble à :

const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');

Enzyme.configure({ adapter: new Adapter() });

fileMocks.js ressemble à :

module.exports = 'i-am-a-stubbed-file';

styleMocks.js ressemble à :

module.exports = {};

Vous devrez également ajouter quelques plugins Babel et la version babel-core tant que devDependencies dans les package.json de chaque application :

        ...
        "@babel/cli": "^7.0.0",
        "@babel/core": "^7.0.0",
        "@babel/plugin-proposal-class-properties": "^7.0.0",
        "@babel/plugin-syntax-dynamic-import": "^7.0.0",
        "@babel/preset-env": "^7.0.0",
        "@babel/preset-flow": "^7.0.0",
        "@babel/preset-react": "^7.0.0",
        "babel-core": "7.0.0-bridge.0",
        "babel-eslint": "^9.0.0",
        "babel-jest": "^23.4.2",
        "babel-loader": "^8.0.2",
        ...
        "jest": "^23.5.0",
        "jest-cli": "^23.5.0",
        ...

Après 3 jours, je viens de trouver les solutions à ce problème.
Il existe 2 solutions pour cela :

Solution 1 :

Vous pouvez changer le nom de votre fichier de .babelrc à babel.config.js , et cela fonctionnera.

##Solution 2 :
J'utilise cette façon.
Créez un fichier de transformation comme celui-ci (le mien est jest-transforme.js ):

const config = {
  babelrc: false,
  presets: [
    [
      "@babel/env",
      {
        modules: false
      }
    ],
    "@babel/react"
  ],
  plugins: [
    ["@babel/plugin-proposal-decorators", { legacy: true }],
    ["@babel/plugin-proposal-class-properties", { loose: true }],
    "transform-es2015-modules-commonjs"
  ]
};
module.exports = require("babel-jest").createTransformer(config);

Voici mon jest.config.js :

module.exports = {
  collectCoverageFrom: ["src/**/*.{js,jsx,mjs}"],
  testMatch: ["<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}", "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"],
  transform: {
    "^.+\\.(js|jsx|mjs)$": "<rootDir>/config/jest/jest-transformer.js"
  },
  transformIgnorePatterns: ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"]
};

Et mon j'ai toujours mon .babelrc
```
environnements const = require("./env-config.js");

module.exports = {
préconfigurations: [
[
"suivant/babelle",
{
"preset-env": {
useBuiltIns : "entrée"
}
}
]
],
plug-in : [
["styled-components", { ssr : true, displayName : true, preprocess : false }],
[
"module-résolveur",
{
racine: ["./"]
}
]
],
env : {
dev : {
plug-in : [
["transformer-définir", environnements],
["module-résolveur", { racine : ["./"] }],
"transformer-décorateurs-héritage",
"transformer-classe-propriétés"
]
},
construire: {
plug-in : [
["transformer-définir", environnements],
["module-résolveur", { racine : ["./"] }],
"transformer-décorateurs-héritage",
"transformer-classe-propriétés"
]
},
production: {
préconfigurations: [
[
"minify", // pourquoi ajouter minify ici, nous exécutons uglify sur l'ensemble des paquets de code
{
mutiler : faux,
évaluer : faux
}
]
],
plug-in : [
["transformer-définir", environnements],
["@babel/plugin-proposal-decorators", { legacy: true }],
["@babel/plugin-proposal-class-properties", { loose: true }],
["module-résolveur", { racine : ["./"] }]
],
commentaires : faux,
compact : vrai,
minifié : vrai
}
}
} ;
````
J'espère que cela pourra vous faire passer ce problème. Applaudir.

@GeorgianSorinMaxim Le problème est que mon application de plaisanterie ignore le fichier .babelrc , et passer à babel.config.js résoudra le problème, mais je l'ai quand même résolu, ma réponse est au-dessus de ce commentaire.

merci @GeorgianSorinMaxim @hoaiduyit à la fin, je l'ai résolu simplement en créant un transformateur personnalisé pour babel-jest. Aucun autre changement si nécessaire.

Babel 7 semble nécessiter babel.config.js pour fonctionner correctement, utilisez-le à la place de babelrc

babel-jest repose toujours sur babel-core de Babel 6, si vous voulez utiliser Babel 7, vous pouvez utiliser
ce transformateur babel7-jest

babel-jest fonctionne très bien avec babel 7, pas besoin de transformateur personnalisé

@SimenB J'ai renommé mon .babelrc en babel.config.js mais il affiche toujours cette erreur avec un jeton inattendu. Cela fonctionne cependant avec babel7-pre.42. Y a-t-il d'autres choses souvent manquées? :) Merci.

@alexindigo Découvrez comment écrire babel.config.js

https://babeljs.io/docs/fr/configuration

Oui, exécuter yarn upgrade --latest résolu le problème :)

@alexindigo @hoaiduyit Comment compris cela à propos du babel.config.js ? Combattant le même problème et trouvant vos solutions, je me disais... _"hmmm, il n'y a aucune chance que ça marche mais j'essaierai quand même."_ mais bien sûr, ça a marché. Merci

Configuration Jest & enzyme : Ajoutez le code suivant dans package.json

"jest": {
    "testEnvironment": "jsdom",
    "moduleDirectories": [
      "src",
      "node_modules"
    ],
    "moduleNameMapper": {
      "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js",
      "\\.(jpg|gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
    },
    "transform": {
      "^.+\\.(js|jsx)$": "babel-jest",
      ".+\\.(css|styl|less|sass|scss)$": "<rootDir>/node_modules/jest-css-modules-transform"
    },
    "setupTestFrameworkScriptFile": "<rootDir>/setupTests.js",
    "setupFiles": [
      "<rootDir>setup.js"
    ],
    "moduleFileExtensions": [
      "css",
      "scss",
      "js",
      "json",
      "jsx"
    ],
    "testRegex": "\/test\/spec\/.*\\.js$",
    "transformIgnorePatterns": [
      "/node_modules/(?!test-component).+\\.js$"
    ]
  }

Pour la configuration d'Enzyme => setup.js

import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
configure({ adapter: new Adapter() })

Pour setupTestFrameworkScriptFile : setupTests.js global.fetch = require('jest-fetch-mock')

const { JSDOM } = require('jsdom')
const jsdom = new JSDOM('<!doctype html><html><body></body></html>')
const { window } = jsdom

const exposedProperties = ['window', 'navigator', 'document']
const { document } = new JSDOM('').window
global.document = document
global.window = document.defaultView
global.HTMLElement = window.HTMLElement
global.HTMLAnchorElement = window.HTMLAnchorElement

Object.keys(document.defaultView).forEach(property => {
  if (typeof global[property] === 'undefined') {
    exposedProperties.push(property)
    global[property] = document.defaultView[property]
  }
})

global.navigator = {
  userAgent: 'node.js',
}

les fichiers .tsx sont-ils simplement confrontés au même problème ?

juste pour diffuser la nouvelle, Jest v24 a été mis à jour pour utiliser Babel 7 en interne, l'utilisation de babel bridge ou babel7-jest ne devrait plus être nécessaire
https://twitter.com/i/web/status/1088904207653105664

J'ai renommé .babelrc en babel.config.js et j'ai également mis à niveau vers Babel7 et j'ai toujours la même erreur qu'avant. Mon fichier babel.config.js :

module.exports = function (api) {
  api.cache(true);

  const presets = ["@babel/preset-env"];

  return {
    presets
  };
}

J'ai installé @babel/preset-react et l'ai ajouté à mon fichier babel.config.js . Correction de l'erreur.

Mon fichier babel.config.js n'était pas détecté par babel-jest , car je l'ai placé dans le répertoire __test__ . Je l'ai déplacé dans le répertoire supérieur où se trouvait package.json et tout a fonctionné.

J'ai résolu un problème similaire en procédant comme suit :

1- ajoutez le fichier de configuration de l'enzyme et écrivez ce qui suit :

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

2- ajoutez la configuration jest à votre package.json comme ça :

"jest": {
 "setupFilesAfterEnv": [
  "./path to your setup file/setupEnzyme.js"
 ]
}

3- ajoutez le fichier .babelrc à votre chemin racine et écrivez ce qui suit dedans :

{
    "env": {
        "test": {
            "presets": [
                "@babel/preset-env",
                "@babel/preset-react"
            ]
        }
    }
}

4- si vous avez une erreur sur le mot-clé "expect" dans votre test, exécutez simplement npm install -D chai et importez la fonction expect dans votre code de test comme ça import { expect } from 'chai';

si vous obtenez toujours une erreur, essayez d'installer des dépendances babel comme celle-ci npm install -D @babel/core @babel/preset-env @babel/preset-react

J'espère que cela t'aides.

Après 3 jours, je viens de trouver les solutions à ce problème.
Il existe 2 solutions pour cela :

Solution 1 :

Vous pouvez changer le nom de votre fichier de .babelrc à babel.config.js , et cela fonctionnera.

Ma solution :

Je n'avais pas de fichier .babelrc, j'ai donc pensé que faire l'inverse devrait aussi fonctionner et j'ai créé un fichier .babelrc en utilisant les informations prédéfinies de babel.config.js à la place. (J'ai créé un fichier supplémentaire, je n'ai pas renommé l'original)
En exécutant à nouveau le test, j'ai reçu une nouvelle erreur : Requires Babel "^7.0.0-0", but was loaded with "6.26.3" .
J'ai googlé cette erreur et cela m'a conduit ici . J'ai suivi les instructions ( npm install [email protected] ) et le test est maintenant en cours d'exécution et réussi.

juste pour diffuser la nouvelle, Jest v24 a été mis à jour pour utiliser Babel 7 en interne, l'utilisation de babel bridge ou babel7-jest ne devrait plus être nécessaire
https://twitter.com/i/web/status/1088904207653105664

La mise à niveau vers Jest v24 a résolu ce problème pour moi :)

obtenir unexpected token erreur

> 10 | const browser; (le point-virgule à la fin)

mon paquet.json

 "dependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.3.4",
    "@babel/register": "^7.0.0",
    "assert": "^1.4.1",
    "chai": "^4.2.0",
    "jest-puppeteer": "^4.0.0",
    "screen-info": "^1.0.1",
    "screenres": "^2.0.1"
  },
  "devDependencies": {
    "@babel/plugin-transform-modules-commonjs": "^7.2.0",
    "@babel/preset-env": "^7.3.4",
    "babel-jest": "^24.5.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-jest": "^24.3.0",
    "jest": "^24.5.0",
    "jest-cli": "^24.5.0",
    "puppeteer": "^1.13.0"
  },
  "jest": {
    "transformIgnorePatterns": [
      "/node_modules/(?!@babel).+\\.js$"
    ],
    "transform": {
      "^.+\\.js?$": "babel-jest"
    }
  },

babel.config.js

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current'
        },
      },
      'jest'
    ]
  ],
  env: {
    test: {
      plugins: ['@babel/plugin-transform-modules-commonjs']
    }
  }
}

Solution hoaiduyit testée. Ça marche. J'ai juste besoin d'ajouter babel.config.js, d'installer babel-jest transform/transpile jest dans jest.config.js

Après 3 jours, je viens de trouver les solutions à ce problème.
Il existe 2 solutions pour cela :

Solution 1 :

Vous pouvez changer le nom de votre fichier de .babelrc à babel.config.js , et cela fonctionnera.

Solution 2 :

J'utilise cette façon.
Créez un fichier de transformation comme celui-ci (le mien est jest-transforme.js ):

const config = {
  babelrc: false,
  presets: [
    [
      "@babel/env",
      {
        modules: false
      }
    ],
    "@babel/react"
  ],
  plugins: [
    ["@babel/plugin-proposal-decorators", { legacy: true }],
    ["@babel/plugin-proposal-class-properties", { loose: true }],
    "transform-es2015-modules-commonjs"
  ]
};
module.exports = require("babel-jest").createTransformer(config);

Voici mon jest.config.js :

module.exports = {
  collectCoverageFrom: ["src/**/*.{js,jsx,mjs}"],
  testMatch: ["<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}", "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"],
  transform: {
    "^.+\\.(js|jsx|mjs)$": "<rootDir>/config/jest/jest-transformer.js"
  },
  transformIgnorePatterns: ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"]
};

Et mon j'ai toujours mon .babelrc

const enviroments = require("./env-config.js");

module.exports = {
  presets: [
    [
      "next/babel",
      {
        "preset-env": {
          useBuiltIns: "entry"
        }
      }
    ]
  ],
  plugins: [
    ["styled-components", { ssr: true, displayName: true, preprocess: false }],
    [
      "module-resolver",
      {
        root: ["./"]
      }
    ]
  ],
  env: {
    dev: {
      plugins: [
        ["transform-define", enviroments],
        ["module-resolver", { root: ["./"] }],
        "transform-decorators-legacy",
        "transform-class-properties"
      ]
    },
    build: {
      plugins: [
        ["transform-define", enviroments],
        ["module-resolver", { root: ["./"] }],
        "transform-decorators-legacy",
        "transform-class-properties"
      ]
    },
    production: {
      presets: [
        [
          "minify", // why add minify here, we run uglify over the whole code bundles
          {
            mangle: false,
            evaluate: false
          }
        ]
      ],
      plugins: [
        ["transform-define", enviroments],
        ["@babel/plugin-proposal-decorators", { legacy: true }],
        ["@babel/plugin-proposal-class-properties", { loose: true }],
        ["module-resolver", { root: ["./"] }]
      ],
      comments: false,
      compact: true,
      minified: true
    }
  }
};

J'espère que cela pourra vous faire passer ce problème. Applaudir.

tks pour votre méthode ~ cette méthode peut résoudre mon problème correctement !

Salut, j'ai essayé plusieurs choses dans ce fil, mais rien ne semble fonctionner. L'erreur principale est étrange car elle semble pointer vers des numéros de ligne qui n'ont pas de sens, presque comme si le code source et le code réel essayant d'être exécuté ne s'alignent pas.

Cette erreur, Jest a rencontré un jeton inattendu, persiste. Je suis sur Jest > 24, pas de script de type, c'est une application de réaction éjectée assez récemment (il y a 6 mois ~). Vider le cache et supprimer node_modules n'a pas aidé. Peut-être que quelqu'un pourrait expliquer exactement quelle configuration doit être en place pour que Jest se transforme et s'exécute correctement et quelles indications mon erreur exacte donne ...

FAIL  __e2e__/chat/sms.spec.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/ben/dev/app/webui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:17
    export default function _asyncToGenerator(fn) {
    ^^^^^^

    SyntaxError: Unexpected token export

       5 |   afterEach(async () => {
       6 |     await logout();
    >  7 | 
         | ^
       8 |     await page.evaluate(() => {
       9 |       localStorage.clear();
      10 |     });

      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.<anonymous> (__e2e__/chat/sms.spec.js:7:49)

Merci à tous,

Jenkins échoue à cause de ce problème, existe-t-il des solutions efficaces ?

Pour toute personne utilisant Create-React-App, l'ajout de transformignorepatterns à votre package.json ne résoudra pas le problème car seules certaines configurations de plaisanteries peuvent être modifiées dans package.json lors de l'utilisation de CRA.

J'ai eu des problèmes avec Jest pour récupérer une bibliothèque interne, Jest affichait des erreurs « jeton inattendues » partout où j'avais mes importations à partir de cette bibliothèque.

Pour résoudre ce problème, vous pouvez modifier votre script de test comme suit :
"test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(<your-package-goes-here>)/)'",

Salut à tous, j'avais du mal à faire des tests unitaires avec mon petit projet qui s'appelle JetSet et écrit en React Native. J'ai cherché pendant 2 jours pour résoudre ce problème, et j'avais essayé de modifier des choses comme babel.config.js, de supprimer ce fichier, puis de créer un fichier .babel (et d'ajouter des trucs).

_Rapport d'erreur:_
D:\jetset\JetSetApp>jest SaveData.test.js
ÉCHEC __test__/SaveData.test.js
● Échec de l'exécution de la suite de tests

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:\jetset\JetSetApp\node_modules\expo-file-system\build\index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import * as FileSystem from './FileSystem';
                                                                                                ^

SyntaxError: Unexpected token *

  1 | import React, { Component } from 'react'
  2 | import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native'
> 3 | import { documentDirectory, getInfoAsync, readDirectoryAsync, readAsStringAsync, writeAsStringAsync, deleteAsync } from 'expo-file-system';
    | ^
  4 |
  5 | /**
  6 |  * This class primarily serves to handle files within the phone system so that results can be stored

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
  at Object.<anonymous> (app/resources/SaveData/SaveData.js:3:1)

Suites de tests : 1 échec, 1 au total
Essais : 0 au total
Instantanés : 0 au total
Temps : 3.509s
Exécuté toutes les suites de tests correspondant à /SaveData.test.js/i.

_ babel.config.js _
module.exports = fonction(API) {
api.cache(true);
revenir {
préréglages : ['babel-preset-expo'],
} ;
} ;

_ package.json _
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "début de l'expo",
"android": "début de l'expo --android",
"ios": "début de l'expo --ios",
"web": "début de l'expo --web",
"eject": "expo eject",
"test": "blague"
},
"blague": {
"preset": "react-native"
},
"dépendances": {
"expo": "^34.0.1",
"expo-file-system": "^6.0.2",
"expo-mail-composer": "^6.0.0",
"moment": "^2.24.0",
"réagir": "16.8.3",
"react-dom": "^16.8.6",
"react-native": " https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz ",
"react-native-gesture-handler": "^1.3.0",
"react-native-selection-group": "^1.1.2",
"react-native-web": "^0.11.4"
},
"devDependencies": {
"@babel/core": "^7.6.2",
"@babel/preset-env": "^7.6.2",
"babel-jest": "^24.9.0",
"babel-preset-expo": "^6.0.0",
"blague": "^24.9.0",
"prop-types": "^15.7.2",
"react-native-dismiss-keyboard": "^1.0.0",
"react-native-modal-datetime-picker": "^ 7.5.0",
"react-navigation": "^3.12.1"
},
"privé": vrai
}

Pour info, je pense que nous avons fini par trouver une solution vraiment stupide à cela, comme si l'ensemble du système de construction ne se comportait pas bien si NODE_ENV="test" n'était pas défini.

Dans les versions les plus récentes de React Jest est intégré, donc dans package.json, le script de test doit être
"test": "react-scripts test"
à la place de
"test": "jest"

Dans les versions les plus récentes de React Jest est intégré, donc dans package.json, le script de test doit être
"test": "react-scripts test"
à la place de
"test": "jest"

Merci beaucoup, cela a résolu le problème pour moi!

Après avoir essayé BEAUCOUP, le problème pour moi:
"transform-es2015-modules-commonjs", manquant sur le fichier .babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    ["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ],
    "transform-flow-strip-types",
    "jsx-control-statements",
    "import-glob",
    "transform-es2015-modules-commonjs",
    [
      "import",
      {
        "libraryName": "antd",
        "style": "css"
      }
    ]
  ]
}

"blague": "^24.9.0",
"babel-jest": "23.6.0",

essaie de mettre à jour ta blague et babel-jest

J'ai renommé .babelrc en babel.config.js et j'ai également mis à niveau vers Babel7 et j'ai toujours la même erreur qu'avant. Mon fichier babel.config.js :

module.exports = function (api) {
  api.cache(true);

  const presets = ["@babel/preset-env"];

  return {
    presets
  };
}

J'ai installé @babel/preset-react et l'ai ajouté à mon fichier babel.config.js . Correction de l'erreur.

cela a résolu mon problème, j'ai installé @babel/preset-env et ajouté à babel.config.js et cela a été corrigé

merci @jmayergit

J'avais changé le fichier babel.rc en fichier babel.config.js mais cela ne fonctionnait pas pour moi. Puis j'ai vu cette réponse : https://stackoverflow.com/questions/58470062/test-jest-with-babel-plugin-import
Si l'on a des plugins d'importation, séparez les plugins pour les environnements de test, de développement et de production.

Mon fichier babel.config.js ressemble maintenant à ceci qui fonctionne :

module.exports = {
  presets: [
    [
      'next/babel',
    ],
  ],
  env: {
    test: {

    },
    dev: {
      plugins: [
        ['import', { libraryName: 'antd', style: 'css' }],
      ],
    },
    production: {
      plugins: [
        ['import', { libraryName: 'antd', style: 'css' }],
      ],
    },
  },
};

Je suis également aux prises avec cette erreur de 5 jours

    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:

    SyntaxError: C:\Users\SK-PC\Desktop\React-Course\expansify\src\test\components\MyNavbar.test.js: Unexpected token (5:28)

      3 | import { MyNavbar } from '../../components/MyNavbar'
      4 | test("Should return MyNavbar component", () => {
    > 5 |     const wrapper = shallow(<MyNavbar />)
        |                             ^
      6 |     expect(wrapper.find('.navbar-brand').find('kbd').text()).toBe("Expensify")
      7 |     // const renderer = new ReactShallowRenderer()
      8 |     // renderer.render(<MyNavbar />)

      at Parser._raise (node_modules/@babel/parser/src/parser/location.js:241:45)
      at Parser.raiseWithData (node_modules/@babel/parser/src/parser/location.js:236:17)
      at Parser.raise (node_modules/@babel/parser/src/parser/location.js:220:17)
      at Parser.unexpected (node_modules/@babel/parser/src/parser/util.js:149:16)
      at Parser.parseExprAtom (node_modules/@babel/parser/src/parser/expression.js:1144:20)
      at Parser.parseExprSubscripts (node_modules/@babel/parser/src/parser/expression.js:539:23)
      at Parser.parseMaybeUnary (node_modules/@babel/parser/src/parser/expression.js:519:21)
      at Parser.parseExprOps (node_modules/@babel/parser/src/parser/expression.js:311:23)
      at Parser.parseMaybeConditional (node_modules/@babel/parser/src/parser/expression.js:263:23)
      at Parser.parseMaybeAssign (node_modules/@babel/parser/src/parser/expression.js:211:21)

 PASS  src/test/reducers/filters.test.js

Test Suites: 1 failed, 5 passed, 6 total
Tests:       29 passed, 29 total
Snapshots:   0 total
Time:        12.144s
Ran all test suites.

@fullstacksk

Dans les versions les plus récentes de React Jest est intégré, donc dans package.json, le script de test doit être
"test": "react-scripts test"
à la place de
"test": "jest"

Vous pouvez lire le document sur :
https://jestjs.io/docs/en/tutorial-react
https://create-react-app.dev/docs/running-tests/#docsNav

@catmans1
Je n'ai pas installé de dépendances telles que create-react-app ou react-scripts.
Est-ce que ça marchera?
"test": "react-scripts test"
à la place de
"test": "jest"

Maintenant, cela fonctionne, lorsque j'ai utilisé babel-preset-jest pour tester l'option avec env et réagir. J'ai supprimé babel-jeast.

A fonctionné pour moi : inclure "@babel/preset-react" à babel.config.js

https://medium.com/@audreyhal/how -to-solve-jest-error-with-create-react-app-part-1-80f33aa1661a

J'ai vu cette erreur après avoir fait une erreur stupide et écrit mon premier fichier de test avec .ts au lieu de l'extension .tsx . Loin du problème d'origine mais j'ai pensé que cela pourrait être utile pour quelqu'un