web-dev-qa-db-fra.com

SyntaxError avec Jest et React et importation de fichiers CSS

J'essaie de réussir mon premier test de test avec React et Babel.

Je reçois l'erreur suivante:

SyntaxError: /Users/manueldupont/test/avid-sibelius-publishing-viewer/src/components/TransportButton/TransportButton.less: jeton inattendu 

    >  7 | @import '../variables.css';
          | ^

Ma config de package.json pour plaisanter ressemble à ceci: 

"babel": {
    "presets": [
      "es2015",
      "react"
    ],
    "plugins": [
      "syntax-class-properties",
      "transform-class-properties"
    ]
  },
  "jest": {
    "moduleNameMapper": {
      "^image![a-zA-Z0-9$_-]+$": "GlobalImageStub",
      "^[./a-zA-Z0-9$_-]+\\.png$": "RelativeImageStub"
    },
    "testPathIgnorePatterns": [
      "/node_modules/"
    ],
    "collectCoverage": true,
    "verbose": true,
    "modulePathIgnorePatterns": [
      "rpmbuild"
    ],
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react/",
      "<rootDir>/node_modules/react-dom/",
      "<rootDir>/node_modules/react-addons-test-utils/",
      "<rootDir>/node_modules/fbjs",
      "<rootDir>/node_modules/core-js"
    ]
  },

Alors qu'est-ce qui me manque?

reactjsbabeljestjs
25
Mano Dupont

moduleNameMapper est le paramètre qui indique à Jest comment interpréter les fichiers avec une extension différente. Vous devez lui dire comment gérer moins de fichiers.

Créez un fichier comme celui-ci dans votre projet (vous pouvez utiliser un nom ou un chemin différent si vous le souhaitez):

config/CSSStub.js

module.exports = {};

Ce module est le module que nous indiquerons à Jest d'utiliser à la place de fichiers CSS ou Less. Puis changez le paramètre moduleNameMapper et ajoutez cette ligne à son objet pour l'utiliser:

'^.+\\.(css|less)$': '<rootDir>/config/CSSStub.js'

Maintenant, Jest traitera tout fichier CSS ou Less comme un module exportant un objet vide. Vous pouvez également faire autre chose. Par exemple, si vous utilisez des modules CSS, vous pouvez utiliser un proxy pour que chaque importation renvoie le nom de la propriété importée. 

Lisez plus dans ce guide: https://facebook.github.io/jest/docs/fr/webpack.html

42
Dan Abramov

J'ai résolu ce problème en utilisant la clé moduleNameMapper dans les configurations jest du fichier package.json.

{
   "jest":{
        "moduleNameMapper":{
             "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
             "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
        }
   }
}

Après cela, vous devrez créer les deux fichiers comme décrit ci-dessous.

  • __mocks__/styleMock.js

    module.exports = {};

  • __mocks__/fileMock.js

    module.exports = 'test-file-stub';

Si vous utilisez des modules CSS, il est préférable de simuler un proxy pour activer les recherches className . Par conséquent, vos configurations deviendront:

{
  "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|less|scss|sass)$": "identity-obj-proxy"
    },
  }
}

Mais vous devrez installer le paquet identity-obj-proxy en tant que dépendance de dev i.e.

yarn add identity-obj-proxy -D

Pour plus d'informations. Vous pouvez vous référer au jest docs

7
Jjagwe Dennis

UPDATE qui utilise create-react-app à partir de fév 2018. Vous ne pouvez pas écraser le moduleNameName dans le package. json mais dans jest.config.js cela fonctionne, malheureusement, je n’ai trouvé aucune documentation à ce sujet. Donc, mon jest.config.js ressemble à ceci:

module.exports = {
...,
  "moduleNameMapper": {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
    "\\.(scss|sass|css)$": "identity-obj-proxy"
  }
}

et il ignore très bien les fichiers scss et @import.

En soutenant ma réponse, j'ai suivi jest webpack

2
AlexNikonov

Ajouter ce qui suit à package.json a résolu ce problème pour moi:

"jest": {
    "moduleNameMapper": {
        ".+\\.(css|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
    }
}

Et bien sûr, vous devez exécuter yarn add -D jest-transform-stub

0
ettanany