SyntaxError mit Scherz und Reagieren und importieren von CSS-Dateien

Ich versuche, meine erste Scherz-Test zu bestehen, mit Reagieren und Babel.

Ich erhalte die folgende Fehlermeldung:

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

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

Mein Paket.json-config für den Scherz so Aussehen: 

"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"
    ]
  },

So was bin ich?

InformationsquelleAutor Mano Dupont | 2016-09-09
  1. 48

    moduleNameMapper ist die Einstellung, sagt Scherz, wie zu interpretieren, Dateien mit unterschiedlicher extension. Sie müssen sagen, wie es zu handhaben ist Weniger Dateien.

    Erstellen Sie eine Datei wie folgt in Ihrem Projekt (die Sie verwenden können, einen anderen Namen oder Pfad, wenn Sie möchten):

    config/CSSStub.js

    module.exports = {};

    Dieser stub ist ein Modul, sagen wir Scherz zu verwenden anstelle von CSS-oder Less-Dateien. Dann ändern moduleNameMapper Einstellung und fügen Sie diese Zeile, um Ihr Objekt verwenden:

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

    Nun Scherz zu behandeln, wird jede CSS-oder Less-Datei als Modul exportieren ein leeres Objekt. Sie können etwas anderes tun, so etwa, wenn Sie CSS verwenden, Module, können Sie einen Proxy verwenden, so dass jeder import gibt die importierten Namen der Eigenschaft.

    Mehr dazu Lesen Sie in dieser Anleitung: https://facebook.github.io/jest/docs/en/webpack.html

    • Ich bin mit Scherz v19+ und haben die folgenden Schlüssel-Wert-paar in moduleNameMappers: "\\.(css|sass)$": "identity-obj-proxy", aber ich habe einige .sass Dateien, die die @import Schlüsselwort, das die transformAndBuildScript-Funktion werfen. Gibt es irgendeine Möglichkeit dieses Problem zu beheben?
    • In der Tat, auch mit einem sassMock.js - Datei, die gerade exportiert ein leeres Objekt für alle \\.sass$ Dateien, sehe ich den gleichen Fehler.
    • Mit "\\.(css|less)$": "identity-obj-proxy" für mich gearbeitet
    • wie hast du das problem lösen? Ich bin immer das gleiche problem, ich bin mit css-Module zum importieren von css-Dateien. Sie finden weitere details über die Frage an: stackoverflow.com/questions/48286678/...
    • Ich hatte nur *.scss vor, hinzufügen von *.css auch Feste meine Probleme. Danke.
    InformationsquelleAutor Dan Abramov
  2. 13

    Ich löste dies durch die Verwendung der moduleNameMapper Schlüssel in der Scherz-Konfigurationen in Paket.json-Datei

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

    Danach müssen Sie zum erstellen der beiden Dateien wie im folgenden beschrieben

    • __mocks__/styleMock.js

      Modul.exports = {};

    • __mocks__/fileMock.js

      Modul.Exporte = 'test-Datei-stub';

    Wenn Sie mit CSS-Modulen, dann ist es besser, zu verhöhnen, einen proxy zu aktivieren className lookups.
    damit Ihre Konfigurationen ändern zu:

    {
  "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"
    },
  }
}

    Aber Sie müssen Sie installieren identity-obj-proxy Paket als dev Abhängigkeit, d.h.

    yarn add identity-obj-proxy -D

    Weitere Informationen. Sie können sich auf die Scherz docs

    • Für jeden, der kommt hier aus erstellen-reagieren-app moduleNameMapper wird nicht unterstützt überschreiben. Die version 1.1.4 an der Stelle des Kommentars.
    InformationsquelleAutor Jjagwe Dennis
  3. 1

    UPDATE, die erstellen-reagieren-app von feb 2018.
    Sie können nicht überschreiben die moduleNameMapper im Paket.json aber in jest.config.js es funktioniert, leider habe ich noch keine gefunden alle docs über diese, warum Sie es tut.
    Also meine jest.config.js wie folgt Aussehen:

    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"
  }
}

    und überspringt scss-Dateien und @import ganz gut.

    Sichern meine Antwort, die ich gefolgt Scherz webpack

    InformationsquelleAutor AlexNikonov
Schreibe einen Kommentar