Zum Hauptinhalt springen
Version: 30.0

Verwendung mit webpack

Inoffizielle Beta-Übersetzung

Diese Seite wurde von PageTurner AI übersetzt (Beta). Nicht offiziell vom Projekt unterstützt. Fehler gefunden? Problem melden →

Jest kann in Projekten verwendet werden, die webpack zur Verwaltung von Assets, Styles und Kompilierung einsetzen. webpack stellt im Vergleich zu anderen Tools einige besondere Herausforderungen dar, da es direkt in Ihre Anwendung integriert ist und die Verwaltung von Stylesheets, Assets wie Bildern und Schriftarten sowie das umfangreiche Ökosystem von nach JavaScript kompilierenden Sprachen und Tools ermöglicht.

Ein webpack-Beispiel​

Beginnen wir mit einer typischen webpack-Konfigurationsdatei und übertragen sie in ein Jest-Setup.

webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: ['node_modules'],
        use: ['babel-loader'],
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.gif$/,
        type: 'asset/inline',
      },
      {
        test: /\.(ttf|eot|svg)$/,
        type: 'asset/resource',
      },
    ],
  },
  resolve: {
    alias: {
      config$: './configs/app-config.js',
      react: './vendor/react-master',
    },
    extensions: ['.js', '.jsx'],
    modules: [
      'node_modules',
      'bower_components',
      'shared',
      '/shared/vendor/modules',
    ],
  },
};

Falls Sie JavaScript-Dateien haben, die mit Babel transformiert werden, können Sie die Babel-Unterstützung aktivieren, indem Sie das babel-jest-Plugin installieren. Nicht-Babel-JavaScript-Transformationen können mit Jests transform-Konfigurationsoption behandelt werden.

Umgang mit statischen Assets​

Als Nächstes konfigurieren wir Jest, um Asset-Dateien wie Stylesheets und Bilder ordnungsgemäß zu verarbeiten. Normalerweise sind diese Dateien in Tests nicht besonders nützlich, daher können wir sie problemlos mocken. Wenn Sie jedoch CSS Modules verwenden, ist es besser, einen Proxy für Ihre className-Abfragen zu mocken.

jest.config.js
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',
    '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
  },
};

Und die Mock-Dateien selbst:

__mocks__/styleMock.js
module.exports = {};
__mocks__/fileMock.js
module.exports = 'test-file-stub';

Mocking von CSS Modules​

Sie können einen ES6-Proxy verwenden, um CSS Modules zu mocken:

npm install --save-dev identity-obj-proxy

Dann werden alle Ihre className-Abfragen auf dem styles-Objekt unverändert zurückgegeben (z.B. styles.foobar === 'foobar'). Dies ist sehr praktisch für React Snapshot Testing.

jest.config.js (for CSS Modules)
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',
    '\\.(css|less)$': 'identity-obj-proxy',
  },
};

Falls moduleNameMapper Ihren Anforderungen nicht gerecht wird, können Sie Jests transform-Konfigurationsoption verwenden, um festzulegen, wie Assets transformiert werden. Beispielsweise könnte ein Transformer, der den Basisnamen einer Datei zurückgibt (sodass require('logo.jpg'); 'logo' zurückgibt), wie folgt geschrieben werden:

fileTransformer.js
const path = require('path');

module.exports = {
  process(sourceText, sourcePath, options) {
    return {
      code: `module.exports = ${JSON.stringify(path.basename(sourcePath))};`,
    };
  },
};
jest.config.js (for custom transformers and CSS Modules)
module.exports = {
  moduleNameMapper: {
    '\\.(css|less)$': 'identity-obj-proxy',
  },
  transform: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/fileTransformer.js',
  },
};

Wir haben Jest angewiesen, Dateien mit Stylesheet- oder Bild-Erweiterungen zu ignorieren und stattdessen unsere Mock-Dateien zu verwenden. Sie können den regulären Ausdruck an die Dateitypen anpassen, die Ihre webpack-Konfiguration verarbeitet.

Tipp

Vergessen Sie nicht, den Standard-Transformer babel-jest explizit einzubinden, wenn Sie ihn zusammen mit zusätzlichen Code-Preprozessoren verwenden möchten:

"transform": {
  "\\.[jt]sx?$": "babel-jest",
  "\\.css$": "some-css-transformer",
}

Konfiguration von Jest zum Auffinden unserer Dateien​

Jetzt, da Jest weiß, wie es unsere Dateien verarbeiten soll, müssen wir ihm mitteilen, wie es sie findet. Für webpacks modules- und extensions-Optionen gibt es direkte Entsprechungen in Jests moduleDirectories- und moduleFileExtensions-Optionen.

jest.config.js
module.exports = {
  moduleFileExtensions: ['js', 'jsx'],
  moduleDirectories: ['node_modules', 'bower_components', 'shared'],

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

<rootDir> ist ein spezieller Platzhalter, der von Jest durch das Stammverzeichnis Ihres Projekts ersetzt wird. In den meisten Fällen ist dies der Ordner, in dem sich Ihre package.json befindet, es sei denn, Sie geben in Ihrer Konfiguration eine benutzerdefinierte rootDir-Option an.

Ähnlich ist Jests Gegenstück zu webpacks resolve.roots (eine Alternative zum Setzen von NODE_PATH) die Option modulePaths.

jest.config.js
module.exports = {
  modulePaths: ['/shared/vendor/modules'],
  moduleFileExtensions: ['js', 'jsx'],
  moduleDirectories: ['node_modules', 'bower_components', 'shared'],
  moduleNameMapper: {
    '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
    '\\.(gif|ttf|eot|svg)$': '<rootDir>/__mocks__/fileMock.js',
  },
};

Und schließlich müssen wir den webpack-alias behandeln. Dafür können wir erneut die moduleNameMapper-Option nutzen.

jest.config.js
module.exports = {
  modulePaths: ['/shared/vendor/modules'],
  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',
  },
};

Das war's! webpack ist ein komplexes und flexibles Tool, daher müssen Sie möglicherweise einige Anpassungen vornehmen, um die spezifischen Anforderungen Ihrer Anwendung zu bewältigen. Glücklicherweise ist Jest für die meisten Projekte flexibel genug, um mit Ihrer webpack-Konfiguration zurechtzukommen.

Tipp

Für komplexere webpack-Konfigurationen können Sie auch Projekte wie babel-plugin-webpack-loaders untersuchen.

Verwendung mit webpack​

Zusätzlich zur Installation von babel-jest, wie bereits beschrieben, müssen Sie @babel/preset-env wie folgt hinzufügen:

npm install --save-dev @babel/preset-env

Anschließend sollten Sie Babel wie folgt konfigurieren:

.babelrc
{
  "presets": ["@babel/preset-env"]
}
Tipp

Jest speichert Dateien im Cache, um die Testausführung zu beschleunigen. Wenn du .babelrc aktualisiert hast und Jest nicht wie erwartet funktioniert, versuche den Cache mit dem Befehl jest --clearCache zu leeren.

Tipp

Wenn du dynamische Imports verwendest (import('some-file.js').then(module => ...)), musst du das dynamic-import-node-Plugin aktivieren.

.babelrc
{
  "presets": [["env", {"modules": false}]],

  "plugins": ["syntax-dynamic-import"],

  "env": {
    "test": {
      "plugins": ["dynamic-import-node"]
    }
  }
}

Ein Beispiel für die Verwendung von Jest mit webpack und React findest du hier.