web-dev-qa-db-fra.com

Jest ne peut pas charger le fichier SVG

Dans mon application, j'utilise React et dockscript. J'ai essayé d'exécuter des tests de plaisanterie, je reçois l'erreur suivante:

C:\Users\e-KDKK\workspace\konrad\mikskarpety\src\images\icons\Sock.svg:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<svg xmlns="http://www.w3.org/2000/svg" width="18.725" height="23.947" viewBox="0 0 18.725 23.947">
                                                                                         ^

SyntaxError: Unexpected token <

  1 | import React, { FC } from 'react';
  2 | 
> 3 | import SockIcon from '../../images/icons/Sock.svg';
    | ^
  4 | 
  5 | export const Spinner: FC = () => {
  6 |   return (

  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> (src/components/Spinner/Spinner.tsx:3:1)

Ce fichier n'est même pas testé. Je ne sais pas pourquoi il essaie de le compiler. Mon jest.config.json Le fichier ne contient que des seuils de couverture.

J'ai lu que la Jest a parfois besoin de section de transformation supplémentaire pour des fichiers spécifiques tels que SVG, mais lorsque j'ai ajouté à la configuration

"transform": {
    "^.+\\.svg$": "jest-svg-transformer"
},

mon message d'erreur n'a changé que pour:

C:\utilisateurs\e-kdkk\workspace\konrad\mikskarpeety\test\utils\debond.test.ts: 1 ({"objet.": Fonction (module, exportations, exiger, __ dirname, __ nom de fichier, jst) { importer {getversion} de 'Jest'; ^

SyntaxError: Unexpected token {

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)

Qui est encore plus déroutant pour moi.

Le code de l'application que vous pouvez trouver ici: https://github.com/konradklimczak/mikskarpety

javascriptreactjssvgjestjs
4
Konrad Klimczak

la plaisanterie ne sait pas comment charger d'autres extensions de fichier que JS/JSX, vous devez trouver le jest.config.js et ajouter transformateur pour les fichiers SVG.

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

et créer 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';
    },
};

lien: https://jestjs.io/docs/fr/configuration.htm#transform-Object-string

3
Tom Pang

Si vous recherchez toujours une solution facile, vous pouvez définir votre fichier sim motivé comme cela.

// svgMock.js
var createReactClass = require('create-react-class');

var Greeting = createReactClass({
  render: function() {
    return null;
  }
});
module.exports = Greeting;

Puis dans jest.config file do

{
    "moduleNameMapper": {
        "^.+\\.svg$": "<rootDir>/__mocks__/svgMock.js"
    }
}
1
Jonathan Guerrero