Jest: „Syntaxfehler: Ungültiges oder unerwartetes Token“ mit .png

Sehen Sie sich http://facebook.github.io/jest/docs/tutorial-webpack.html#content an

EDIT: Neuer Link ist https://jestjs.io/docs/en/webpack

@matheusml hast du das überhaupt gelöst? @cpojer Ich kann bestätigen, dass ich dieses Problem auch habe. Ich habe statische Assets außerhalb meiner Quelle. dh Meine Verzeichnisstruktur sieht so aus:

|-fonts
|-img
\_styles
src
|-components
|-pages
...

Meine Jest-Konfiguration sieht ähnlich aus wie das im Link angegebene Beispiel:

"jest": {
    "collectCoverageFrom": [ "src/**/*.{js,jsx}" ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "tests/__mocks__/fileMock.js"
    }
  }

Mein Test schlägt fehl, wenn versucht wird, das Bild zu importieren:

import thumbnail from 'img/thumbnail.png'

Ich denke, es ist wichtig zu beachten, dass ich den Fehler bekomme, wenn ich das Verzeichnis public nicht in moduleDirectories einfüge: Cannot find module 'img/thumbnail.png' from 'MyModule.js'

Wird dies erwartet? Sollte es wirklich das Vorhandensein eines Importereignisses validieren, obwohl die Modulzuordnung bereits eingerichtet ist? Sonst bekomme ich den gleichen Fehler wie oben. Ich habe keine andere Art des Imports im Name Mapper ausprobiert.

Ich stehe vor dem gleichen Problem, ich versuche, das Rendering des Reactjs-Servers zu implementieren. Jede Lösung dafür.

Ich habe dies in mein babelrc eingefügt und die Dinge scheinen zu funktionieren:

{
"Voreinstellungen": ["es2015", "reagieren"]
}

Gleicher Fehler

SyntaxError: Unexpected token <
      /media/sibin/F_WORK/<path>/<icon-name>.svg:1
      ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<?xml version="1.0" encoding="UTF-8"?>
                                                                                               ^
      SyntaxError: Unexpected token <

Auch ich scheine dieses Problem zu haben. Es passiert nur, wenn ich das PNG benötige.

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){�PNG
                                                                                             ^
    SyntaxError: Invalid or unexpected token

Auch derselbe Fehler. Repariert es jemand?

Habe den gleichen Fehler mit .mp3, nichts hilft

Fehler wie dieser können auch das Ergebnis der Verwendung einer Voreinstellung mit absoluten Pfaden sein, die beispielsweise im Modulnamen-Mapper festgelegt sind. Dieser Fall wird jedoch in der nächsten Version behoben

Ich hatte den gleichen Fehler und habe ihn behoben, indem ich eine assetsTransformer.js erstellt habe:

const path = require('path');

module.exports = {
  process(src, filename, config, options) {
    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
  },
};

Fügen Sie dies dann zu Ihrer Jest-Konfiguration in package.json hinzu:
"jest": { "moduleNameMapper": { "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/assetsTransformer.js", "\\.(css|less)$": "<rootDir>/assetsTransformer.js" } },

Quelle: https://facebook.github.io/jest/docs/webpack.html#content

In meinem Fall war mir nicht klar, dass <rootDir> ein von Jest bereitgestellter Token ist, und ich nahm an, dass ich ihn ersetzen musste. Das Hinzufügen zu den moduleNameMapper -Einträgen löste das Problem.

Ich habe das von @bombellos erwähnte assetTransformer.js hinzugefügt. Befolgen Sie auch die Anweisungen zur Verwendung mit Webpack . Aber ich bekomme immer noch die gleichen Fehler.

PNG:

 FAIL  components/__tests__/List.js
  ● Test suite failed to run

    /assets/images/logo-header.png:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){�PNG
                                                                                             ^

    SyntaxError: Invalid or unexpected token

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
      at Object.<anonymous> (components/PageHeader.js:15:19)
      at Object.<anonymous> (components/Main.js:10:436)

SVG:

 FAIL  ui/Button/__tests__/snapshot.test.js
  ● fixture 'TextAndIcon' snapshots are rendered correctly

    /assets/icons/fontawesome/regular.svg:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                                                                                             ^

    SyntaxError: Unexpected token <

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
      at Icon (ui/Icon.js:31:17)
      at resolve (node_modules/react-dom/cjs/react-dom-server.node.development.js:2599:14)
      at ReactDOMServerRenderer.render (node_modules/react-dom/cjs/react-dom-server.node.development.js:2746:22)
      at ReactDOMServerRenderer.read (node_modules/react-dom/cjs/react-dom-server.node.development.js:2722:19)
      at Object.renderToStaticMarkup (node_modules/react-dom/cjs/react-dom-server.node.development.js:2991:25)

Meine Ordnerstruktur ist im Wesentlichen:

<rootDir>
  assets
    *.png, *.svg, ...
  components
    *.js
  ui
    *.js

Anscheinend werden die Dateien immer noch geladen, anstatt verspottet zu werden, aber ich habe keine Ahnung, wie ich das debuggen soll.

.babelrc:

{
  "presets": [
    ["es2015", {"modules": false}],
    "react",
    "stage-1",
    ["env", {
      "targets": {
        "browsers": [
          "last 3 versions",
          "> 1%",
          "Firefox ESR",
          "iOS 9"
        ]
      }
    }]

  ],
  "plugins": [
    "react-hot-loader/babel",
    "transform-class-properties",
    "transform-react-jsx-source",
    "glamorous-displayname",
    "wildcard"
  ],
  "env": {
    "development": {
      "plugins": [
        ["transform-runtime", {
          "polyfill": true
        }]
      ]
    },
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

Paket.json:

  "jest": {
    "snapshotSerializers": [
      "jest-glamor-react",
      "enzyme-to-json/serializer"
    ],
    "moduleFileExtensions": ["js"],
    "moduleDirectories": ["node_modules"],
    "transform": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/jest/assetsTransformer.js"
    }
  },

Ich bin dumm, ich hatte ein weiteres jest.config.js in meinem Stammverzeichnis, das die Einstellungen in package.json überschrieb. Obwohl es noch nicht läuft, bekomme ich diesen speziellen Fehler nicht mehr.

Habe es funktioniert. Hier sind die wichtigen Bits (bitte beachten Sie, dass ich aufgrund von Enzym 3 mit Reaktion 16 einige zusätzliche Konfigurationen habe):

.babelrc

{
  "presets": [
    "es2015",
    "react",
    "stage-1",
    "env"

  ],
  "plugins": [
    "react-hot-loader/babel",
    "transform-class-properties",
    "transform-react-jsx-source",
    "glamorous-displayname",
    "wildcard"
  ],
  "env": {
    "development": {
      "plugins": [
        ["transform-runtime", {
          "polyfill": true
        }]
      ]
    }
  }
}

jest.config.js

// this helps: https://github.com/facebook/jest/issues/2081#issuecomment-332406033
module.exports = {
  verbose: true,
  setupFiles: ['./jest.setup.js'],
  snapshotSerializers: ['jest-glamor-react', 'enzyme-to-json/serializer'],
  moduleFileExtensions: ['js', 'jsx'],
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/config/jest/assetsTransformer.js',
  },
};

jest.setup.js

import 'raf/polyfill';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

Hoffe das hilft jemandem.

Ich hatte Probleme mit einer svg -Datei. Mir wurde klar, dass ich es mit identity-obj-proxy verspotten könnte:

    "moduleNameMapper": {
      "\\.(css|scss|svg)$": "identity-obj-proxy"
    },

Für alle, die sich mit diesem Problem befassen, funktioniert @timgivois Way wunderbar für mich. Sie müssen npm install --save-dev identity-obj-proxy installieren, um die notwendigen Abhängigkeiten zu erhalten.

  "jest": {
    "moduleNameMapper": {
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
    }
  }

Während die Lösung von @mbaranovski funktioniert, weiß ich nicht, ob er beabsichtigte, sie als Transformator zu verwenden. Es erzeugt die folgende Ausgabe (achten Sie auf das src-Attribut):

<img alt="ImgName" height="28" src={ Object { "process": [Function], } } width="112" />

Im Wesentlichen ordnet es alles von diesem Modul dem Ort zu, an dem ich ein SVG benötigte. Sie könnten also davonkommen, dass dieses Modul einfach so lautet:

module.exports = {}

Die andere Problemumgehung, wie oben angegeben, besteht darin, identity-obj-proxy zu verwenden.

@magnusart

"jest": {
    "moduleNameMapper": {
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
    }
  }

es rettet meinen Tag. Danke!!.

@mbaranovski Es hat gut funktioniert, als ich nur zum Testen scherzte. Leider bekomme ich, wenn ich versuche, die Reaktionsskripte von create-react-app durchzugehen

Out of the box, Create React App only supports overriding these Jest options

Gibt es dafür eine Problemumgehung? Oder ist die einzige Lösung, create-react-app auszuwerfen?

Ich glaube nicht, dass CRA diese Option unterstützt. Ich bin mir nicht sicher, warum es Optionen schließen will, wahrscheinlich ein guter Grund 🙂

/cc @gaearon

Eine andere Problemumgehung:

npm i --save-dev jest-transform-stub

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

Ich habe ein reagierendes natives Modul mit Bildern. Ich habe assetsTransformer , identity-obj-proxy und jest-transform-stub ausprobiert. Nur assetsTransformer funktioniert.

Hallo @sibinx7 Ich habe dieses Problem behoben durch: https://github.com/facebook/jest/issues/2663/#issuecomment -317109798

Ich habe dies mit dem Paket jest-react-native gelöst, da alle Lösungen hier für mich nicht funktioniert haben. Vielleicht ist mein Problem ein anderes, weil ich Probleme mit PNG-Dateien habe, die sich im react-native-router-flux -Paket befinden.

Hier ein Fragment meiner package.json -Datei:

{
  // ... 
  "devDependencies": {
    // ...
    "jest": "^23.4.1",
    "jest-react-native": "^18.0.0",
  },
  "jest": {
    "preset": "jest-react-native",
    "verbose": true,
    "modulePathIgnorePatterns": [
      "<rootDir>/node_modules/react-native/Libraries/react-native/",
      "<rootDir>/node_modules/react-native/packager/"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!((jest-)?react-native|react-clone-referenced-element|react-navigation|react-native-router-flux))"
    ]
  },
  // ...
}

Leichte Modifikation für den Umgang mit XML-Dateien, in diesem Fall mit der Transformationsoption :

jest.config.js

module.exports = {
    transform: {
        ".+.(xml|bpmn)": "<rootDir>/src/__tests__/transformers/xmlTransformer.ts"
    },
}

/src/__tests__/transformers/xmlTransformer.ts (muss möglicherweise an Ihren Pfad angepasst werden,ist ein Helfer, der das Stammverzeichnis des Projekts darstellt).

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

Weitere Informationen finden Sie hier .

Sehen Sie sich http://facebook.github.io/jest/docs/tutorial-webpack.html#content an

Der angegebene Link ist defekt

https://jestjs.io/docs/en/webpack

@magnusart

"jest": {
    "moduleNameMapper": {
      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
    }
  }

es rettet meinen Tag. Danke!!.

Ich nahm ein Stichwort davon und installierte babel-jest , dann ersetzte ich identity-obj-proxy durch babel-jest

oder verwenden Sie diesen https://github.com/eddyerburgh/jest-transform-stub

Nur die Lösung von @eddyerburgh hat bei mir funktioniert.

@magnusart
Sie retten meinen Tag, es funktioniert gut

Ich hatte dieses PNG-Problem, nachdem ich ./node_modules/react-native-gesture-handler/jestSetup.js zu setupFiles hinzugefügt hatte (das war mein Versuch, das Scherzproblem mit react-native-gesture-handler zu lösen).

Ich habe https://github.com/facebook/jest/issues/2663#issuecomment -341384494 ( @magnusart using identity-obj-proxy ) ausprobiert, aber es hat aus irgendeinem Grund enzyme kaputt gemacht (es hat enzyme wandelt mock in ein Symbol und nicht in eine Funktion um). Dann habe ich https://github.com/facebook/jest/issues/2663#issuecomment -369040789 (@eddyerburgh
mit jest-transform-stub ), aber es hat nichts bewirkt.

Schließlich habe ich https://github.com/facebook/jest/issues/2663#issuecomment -274270387 ( @cpojer die webpack -Lösung am Anfang) ausprobiert, und das war die einzige, die für mich funktionierte.

Wenn jemand diesen Fehler mit SVG bekommt, kann er wahrscheinlich diese Bibliothek verwenden, es hat wirklich gut für mich funktioniert https://www.npmjs.com/package/jest-svg-transformer

Ich habe diesen Code nur in meiner jest.config.ts -Datei hinzugefügt

transform: { '^.+\\.tsx?$': 'babel-jest', '^.+\\.svg$': 'jest-svg-transformer', },

Und der Code in dieser Datei ist dieser

ihr könnt moduleNameMapper ignorieren, nur weil ich den benutzerdefinierten Import mit babel verwende