web-dev-qa-db-fra.com

Échec du test Jest: SyntaxError: jeton inattendu <

Je ne sais pas où chercher cette erreur.

Utilisation de TypeScript avec React et Jest et Enzyme pour les tests unitaires.

Exemple Package.json:

"scripts": {
    "start": "node server.js",
    "bundle": "cross-env NODE_ENV=production webpack -p",
    "test": "jest"
  },
  "jest": {
    "transform": {
      "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "json"
    ]
  }

Exécution des résultats du test npm dans:

FAIL src/components/Component.test.tsx

 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<?xml version="1.0" encoding="UTF-8"?>
                                                                                             ^

    SyntaxError: Unexpected token <

Edit: Il semble se produire le premier endroit où j'utilise require pour charger un fichier statique .svg. Pourquoi ne peut-il pas gérer cela? Existe-t-il un moyen d'ignorer le lancement de cette erreur lors de l'utilisation de require?

reactjstypescriptjestjs
17
cbll

Jest n'utilise pas Webpack donc il ne sait pas comment charger d'autres extensions de fichiers que js/jsx. Pour ajouter la prise en charge d'autres extensions, vous devez écrire des transformateurs personnalisés. L'un des transformateurs est un transformateur TypeScript que vous avez défini dans votre configuration dans ce fragment:

"transform": {
   "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
},

Vous devez maintenant ajouter un transformateur pour les fichiers svg. Étendons votre config

"transform": {
       "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js",
       "^.+\\.svg$": "<rootDir>/svgTransform.js" 
    },

et créez le fichier svgTransform.js dans votre répertoire racine avec le contenu suivant

module.exports = {
  process() {
    return 'module.exports = {};';
  },
  getCacheKey() {
    // The output is always the same.
    return 'svgTransform';
  },
};

Bien sûr, c'est un transformateur de base qui renvoie toujours la même valeur.

Lien vers la documentation: http://facebook.github.io/jest/docs/en/configuration.html#transform-object-string-string

21
niba