web-dev-qa-db-fra.com

L'importation d'images rompt le test de plaisanterie

In React components importing assets (ex, import logo from "../../../assets/img/logo.png) donne une telle erreur

({"Object.": Fonction (module, exporte, requiert, __ dirname, __ filename, global, jest) {�PNG
SyntaxError: jeton non valide ou inattendu dans ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js: 305: 17)

ma config est plaisanterie

"jest": {
"testRegex": ".*\\.spec\\.js$",
"moduleFileExtensions": [
  "js",
  "jsx",
  "json"
],
"moduleDirectories": [
  "node_modules",
  "src",
  "assets"
],
"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)$": "<rootDir>/__mocks__/styleMock.js"
},
"verbose": true,
"bail": true
}

qu'est-ce que je rate?

reactjstestingwebpackjestjs
23
Annie Alan

Je vais rendre cela aussi simple que possible

Lorsque vous importez des fichiers image, Jest essaie d'interpréter les codes binaires des images en tant que .js, ce qui entraîne des erreurs.

the only way out is to mock a default response anytime jest sees an image import

Comment faisons-nous cela?

  • vous dites d'abord à Jest d'exécuter le fichier simulé chaque fois qu'une importation d'image est rencontrée. vous faites cela en ajoutant la clé ci-dessous à votre fichier package.json
"jest": {
 "moduleNameMapper": {
      "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/mocks/fileMock.js"
    }
}

si vous avez déjà le "Jest", ajoutez simplement le "moduleNameMapper" enfant dedans

  • enfin, créez un dossier mocks dans votre racine et créez fileMock.js fichier à l'intérieur. remplir le fichier avec l'extrait ci-dessous
module.exports = ''; 

Note > if you are using es6 you can use export default ''; to avoid an Eslint flag

lorsque vous avez terminé les étapes ci-dessus, vous pouvez redémarrer le test et vous êtes prêt à partir.

Remarque. n'oubliez pas d'ajouter les différentes extensions de vos fichiers image dans le moduleNameMapper afin de pouvoir les moquer.

J'espère avoir pu aider. #à votre santé!

39
Adépòjù Olúwáségun

Si vous souhaitez utiliser jest avec webpack, vous devez le configurer explicitement comme tel. Jetez un œil à ce guide ici: http://facebook.github.io/jest/docs/en/webpack.html

1
kngroo

En cas de IOS noms d'images avec @

moduleNameMapper: {
    "^image![a-zA-Z0-9$_-]+$": "GlobalImageStub",
    "^[@./a-zA-Z0-9$_-]+\\.(png|gif)$": "RelativeImageStub"
  }
0
Bogdan Ustyak