Jest: Jest funktioniert nicht mit JSX, das CSS importiert

@svipben https://facebook.github.io/jest/docs/webpack.html#mocking -css-modules

@maximderbin Danke!

@maximderbin Danke! Es löst mein Problem, indem es moduleNameMapper hinzufügt

@svipben @maximderbin @simonxl wo muss ich diesen moduleNameMapper hinzufügen?
Ich sehe im Dokument, dass wir es in die packag.json einfügen werden, aber welche?
tnx

@sarahmarciano moduleNameMapper ist ein Teil Ihrer Konfiguration. Standardmäßig können Sie die Konfiguration in package.json (diejenige, die jest in Abhängigkeiten enthält) unter dem Schlüssel „jest“ wie folgt festlegen:

{
  "dependencies": {...}
  "jest": {
    "moduleNameMapper": {...}
  }
}

Ich habe dies gelöst, indem ich die Taste moduleNameMapper in den Jest-Konfigurationen in der Datei package.json verwendet habe

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

Danach müssen Sie die beiden Dateien wie unten beschrieben erstellen

• __mocks__/styleMock.js

module.exports = {};

• __mocks__/fileMock.js

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

Wenn Sie CSS-Module verwenden, ist es besser, einen Proxy zu simulieren, um Klassennamen-Lookups zu aktivieren.
daher ändern sich Ihre Konfigurationen 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 das Paket identity-obj-proxy als Dev-Abhängigkeit installieren, dh

yarn add identity-obj-proxy -D

Für mehr Informationen. Sie können auf die Jest-Dokumente verweisen

Beachten Sie, dass die hier empfohlenen Ansätze nicht funktionieren, wenn Ihre CSS-Module Werte exportieren, von denen Ihre JSX-Dateien abhängen. Die meisten Leitfäden gehen davon aus, dass Sie CSS-Module nur zum Exportieren von Klassennamen verwenden. Ich wünschte, es gäbe eine Anleitung zum korrekten Verspotten von CSS-Modulen.

@matthew-dean was meinst du mit "CSS-Module richtig verspotten"? Können Sie Ihren Anwendungsfall etwas genauer beschreiben? Ich habe große Erfahrung mit identity-obj-proxy

:export {
  sizeMobile: $size-mobile / 1px;
  sizePhablet: $size-phablet / 1px;
  sizeSmallTablet: $size-small-tablet / 1px;
  sizeTablet: $size-tablet / 1px;
  sizeDesktop: $size-desktop / 1px;
  sizeLargeDesktop: $size-large-desktop / 1px;
}

import styles from './variables.scss'

const tileSize = parseFloat(styles.sizeTablet) / 3
//...
render() {
  return <Tile style={{width: tileSize}} />
}

Dies ist ein erfundenes Beispiel, das nur demonstriert, dass Sie Konstanten (Werte) zwischen CSS-Modulen und JS teilen können und dass bedingtes Rendering oder dynamische Requisiten basierend auf Werten zugewiesen werden können.

Aber mit identity-obj-proxy können diese Werte nicht in Ganzzahlen umgewandelt werden, geschweige denn die tatsächlichen Werte, die vorhanden sind. Wenn Sie also JSX-Code haben, der auf in Ihren CSS-Modulen definierte Konstanten angewiesen ist, können Sie dies nicht testen, ohne das CSS-Modul ordnungsgemäß zu verspotten (wobei ein Objekt zurückgegeben wird, das die Werte als testbare Ganzzahlen enthält). identity-obj-proxy geht nur davon aus, dass Ihre CSS-Module ein Objekt mit nichts anderem als bereichsbezogenen CSS-Klassennamen enthalten; Es unterstützt nicht den anderen Aspekt von CSS-Modulen, nämlich die Fähigkeit, Werte / Konstanten zu exportieren, die wiederum in JS-Operationen verwendet werden.

@SimenB

Übrigens konnte ich das CSS-Modul erfolgreich so verspotten:

const styles = require('styles/variables.scss')

jest.mock('styles/variables.scss', () => {
  return {
    sizePhablet: 500,
    sizeSmallTablet: 768,
    sizeTablet: 1024,
    sizeDesktop: 1440,
    sizeLargeDesktop: 1920
  }
})

Hoffentlich ist das für jemanden nützlich, der alle Funktionen von CSS-Modulen verwendet und sich wie ich über den Standardratschlag "Verwenden Sie einfach identity-obj-proxy " die Haare raubte.

Ich habe dieses Problem mit 'jest-transform-css' gelöst.
Fügen Sie nach der Installation das Folgende in der Jest-Konfiguration hinzu.

"transform": {
      "^.+\\.js$": "babel-jest",
      ".+\\.(css|styl|less|sass|scss)$": "jest-transform-css"
    }

Jetzt werden CSS-Dateien genau wie JS-Dateien transpiliert.

@matthew-dean wo hast du das Mock-CSS-Modul geschrieben und wie referenzierst du es zum Scherz?

Ich verwende ein externes Paket und es importiert seine eigenen Dateien in eine einzelne Datei, indem es Folgendes verwendet:
<strong i="6">@import</strong> "progress-tracker/progress-tracker-variables.scss";

Immer wenn ich den Jest starte, um mit dem Testen zu beginnen

der obige Fehler taucht auf. Ich habe bereits ein CSS-Mockup in der Datei „package.json“ angegeben

Ich freue mich auf Hilfe zu diesem Thema. Irgendwelche Tricks, Vorschläge?

Bearbeiten: Ich habe sowohl die Pakete babel-jest als auch identity-obj-proxy ausprobiert und keines davon hat funktioniert. Das Problem besteht weiterhin.

Bearbeiten 2: Ich habe auch die folgende Konfiguration gemäß den Lösungen ausprobiert, auf die ich im Internet gestoßen bin.

Ich verwende Babel 7 , babel-jest ^24.5.0 , Jest ^24.1.0 .

Nachdem ich die obigen Ratschläge befolgt habe, erhalte ich immer noch diesen Fehler, wenn ich versuche, import eine Funktion oder ein Objekt in eine Jest-Testdatei (z. B. Post.test.js ) einzufügen, wenn die Zieldatei (z. B. Post.js ) importiert eine CSS-Datei - zB ./postStyles.css .

Jest encountered an unexpected token

SyntaxError: Unexpected token .

Details:

    /Users/ben/Desktop/Work/code/bengrunfeld/src/front-end/components/Post/postStyles.css:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.post h1, .post h2, .post h3 {

      3 |
      4 | import { PostText } from './styles'
    > 5 | import './postStyles.css'

Gemäß dem oben verlinkten Artikel ist dies in meinem package.json :

"jest": {
    "moduleFileExtensions": ["js", "jsx"],
    "moduleDirectories": ["node_modules", "bower_components", "shared"],

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

      "^react(.*)$": "<rootDir>/vendor/react-master$1",
      "^config$": "<rootDir>/configs/app-config.js"
    }
  },

und im Stammverzeichnis habe ich __mocks__/styleMock.js mit folgendem Code:

module.exports = {};

Zum Schluss meine jest.config.js :

module.exports = {
  setupFiles: ['<rootDir>/src/test/setup.js']
}

Was wiederum Enzyme konfiguriert:

import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

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

Ich habe Mühe, fast dasselbe Problem zu lösen, bei dem meine scss -Datei @import-Anweisungen enthält. Test schlägt fehl und sagt SyntaxError: Ungültiges oder unerwartetes Token. Kann mir bitte jemand helfen?

Ich habe die oben angegebenen Lösungen befolgt, aber keine davon scheint bei mir zu funktionieren

Ich konnte dies lösen, indem ich @babel/polyfill als Dev-Abhängigkeit hinzufügte

das gleiche hier @fthomas82

Ich habe dies gelöst, indem ich die Taste moduleNameMapper in den Jest-Konfigurationen in der Datei package.json verwendet habe

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

Danach müssen Sie die beiden Dateien wie unten beschrieben erstellen

• __mocks__/styleMock.js

module.exports = {};

• __mocks__/fileMock.js

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

Wenn Sie CSS-Module verwenden, ist es besser, einen Proxy zu simulieren, um Klassennamen-Lookups zu aktivieren.
daher ändern sich Ihre Konfigurationen 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 das Paket identity-obj-proxy als Dev-Abhängigkeit installieren, dh

yarn add identity-obj-proxy -D

Für mehr Informationen. Sie können auf die Jest-Dokumente verweisen

Es hat für mich funktioniert. Danke!!!

Ich habe dieses Problem mit 'jest-transform-css' gelöst.
Fügen Sie nach der Installation das Folgende in der Jest-Konfiguration hinzu.

"transform": {
      "^.+\\.js$": "babel-jest",
      ".+\\.(css|styl|less|sass|scss)$": "jest-transform-css"
    }

Jetzt werden CSS-Dateien genau wie JS-Dateien transpiliert.

Danke, Bruder @krajasekhar
Bei mir funktioniert es 👍

Ich habe die vorgeschlagene Konfiguration zu packages.json hinzugefügt, ohne Erfolg, dann wurde mir klar, dass ich eine jest.config.js in meinem Projektstammverzeichnis hatte, Jest verwendet diese Konfigurationsdatei über packages.json .

Als Referenz hier meine jest.config.js Datei:

module.exports = {
  setupFilesAfterEnv: ['<rootDir>/.setup-tests.js'],
  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.+\\.(css|styl|less|sass|scss)$': 'jest-transform-css',
  },
};

Ich muss ein rohes CSS in meinen Code importieren

import "./cloud.css?raw"

Ich habe auch jest config geändert
"jest":{ "moduleNameMapper": { "\\.(css|less|scss|sass|css?raw)$": "identity-obj-proxy" },

Trotzdem erhalte ich einen Testfehler in der Importzeile. Irgendeine Idee, wie man den Rohimport verspottet?

Lösung von @import Unexpected token=:)

Installationspaket:
npm i --save-dev identity-obj-proxy

Fügen Sie jest.config.js hinzu

module.exports = {
  "moduleNameMapper": {
    "\\.(css|less|scss)$": "identity-obj-proxy"
  }
}

Falls hier jemand ankommt:
Dieses Modul ist das aktuellste, das ich je gesehen habe: https://www.npmjs.com/package/jest-css-modules-transform

transform: { '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node_modules/babel-jest', ".+\\.(css|styl|less|sass|scss)$": "jest-css-modules-transform" }, transformIgnorePatterns: [ '/node_modules/', '^.+\\.module\\.(css|sass|scss)$', ], moduleNameMapper: { '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy' },

Ich habe die vorgeschlagene Konfiguration zu packages.json hinzugefügt, ohne Erfolg, dann wurde mir klar, dass ich eine jest.config.js in meinem Projektstammverzeichnis hatte, Jest verwendet diese Konfigurationsdatei über packages.json .

Als Referenz hier meine jest.config.js Datei:

module.exports = {
  setupFilesAfterEnv: ['<rootDir>/.setup-tests.js'],
  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.+\\.(css|styl|less|sass|scss)$': 'jest-transform-css',
  },
};

Vielen Dank an alle, die eine Lösung präsentiert haben, und besonders an Sie @Shadoow! Es war eine Art logische Sache, aber mir fehlte, dass ... die Konfigurationsdatei über die Einstellungen in package.json verwendet wird

Kurz gesagt, für Neuankömmlinge hat sich für mich eine Vereinigung mehrerer Lösungen bewährt, die von unserem Community-Dream-Team präsentiert wurden:

1) Erstellen Sie eine jest.config.json-Datei

touch jest.config.json open jest.config.json

2) Jest-transform-css installieren:

yarn add jest-transform-css -D

3) So sollte Ihre Jest-Konfigurationsdatei aussehen:

module.exports = {
  preset: 'ts-jest/presets/js-with-babel',
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)$': './jest.mock.js',
  },
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/assets/'],
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
    '\\.(css|less|scss|sass)$': 'jest-transform-css',
  },
};

4) Aktualisieren Sie Ihre package.json (übertragen Sie zuerst alle Ihre JEST-Konfigurationen, falls vorhanden, in die neue jest-Konfigurationsdatei), dann geht die Magie hier hin:

"test": "jest --config ./jest.config.js"

Tks alle!