3
votes

Il ne peut pas charger le fichier svg

Dans mon application, j'utilise React et TypeScript. J'ai essayé d'exécuter des tests de plaisanterie, j'obtiens l'erreur suivante:

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)

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

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

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

mon message d'erreur a changé uniquement pour:

C: \ Users \ e-KDKK \ workspace \ konrad \ mikskarpety \ test \ utils \ debounce.test.ts: 1 ({"Object.": Function (module, exports, require, __ dirname, __ filename, global, jest) { import {getVersion} de 'jest'; ^

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 qui est encore plus déroutant pour moi.

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

javascript reactjs jestjs svg

0 commentaires

4 Réponses :

9
votes

jest ne sait pas comment charger d'autres extensions de fichiers que js / jsx, vous devez trouver le jest.config.js et ajouter un transformateur pour les fichiers svg.

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

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

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

lien: https://jestjs.io/docs/en/configuration.html#transform-object-string-string

0 commentaires

5
votes

Une autre option plus simple pour résoudre ce problème est jest-svg-transformer .

Installez-le simplement: npm i jest-svg-transformer ou yarn add jest-svg-transformer

Et ajoutez au jest.config.js à la section de la transformation:

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

0 commentaires

3
votes

Une autre option (non spécifique à React) consiste à utiliser jest-transform-stub car cela fonctionnera pour tout fichier non-JS souhaité.

{
  "jest": {
    // ..
    "transform": {
      "^.+\\.js$": "babel-jest",
      ".+\\.(svg|css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
    }
  }
}

0 commentaires

1
votes

Si vous recherchez toujours une solution simple, vous pouvez définir votre fichier fictif comme suit

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

Ensuite, dans le fichier jest.config, faites

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

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

0 commentaires