Vai al contenuto principale
{ "message": "Versione: 30.0", "description": "" }

Utilizzo con webpack

Traduzione Beta Non Ufficiale

Questa pagina è stata tradotta da PageTurner AI (beta). Non ufficialmente approvata dal progetto. Hai trovato un errore? Segnala problema →

Jest può essere utilizzato in progetti che impiegano webpack per gestire asset, stili e compilazione. webpack presenta effettivamente alcune sfide uniche rispetto ad altri strumenti poiché si integra direttamente con la tua applicazione per gestire fogli di stile, asset come immagini e font, oltre all'ampio ecosistema di linguaggi e strumenti di compilazione verso JavaScript.

Un esempio pratico con webpack​

Partiamo da un tipico file di configurazione webpack e trasformiamolo in una configurazione Jest.

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',
    ],
  },
};

Se disponi di file JavaScript trasformati da Babel, puoi abilitare il supporto per Babel installando il plugin babel-jest. Le trasformazioni JavaScript non basate su Babel possono essere gestite tramite l'opzione di configurazione transform di Jest.

Gestione degli asset statici​

Configuriamo ora Jest per gestire correttamente file di asset come fogli di stile e immagini. Solitamente questi file non sono particolarmente utili nei test, quindi possiamo tranquillamente sostituirli con mock. Tuttavia, se utilizzi CSS Modules è preferibile creare un proxy mock per le ricerche dei className.

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',
  },
};

Ed ecco i file mock stessi:

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

Mocking dei CSS Modules​

Puoi utilizzare un Proxy ES6 per simulare CSS Modules:

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

Così tutte le ricerche di className sull'oggetto styles restituiranno il valore originale (es. styles.foobar === 'foobar'). Questo è particolarmente utile per il Testing con Snapshot in React.

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',
  },
};

Se moduleNameMapper non soddisfa le tue esigenze, puoi usare l'opzione di configurazione transform di Jest per specificare come trasformare gli asset. Ad esempio, un trasformatore che restituisce il nome base di un file (in modo che require('logo.jpg'); restituisca 'logo') può essere scritto così:

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',
  },
};

Abbiamo istruito Jest a ignorare i file con estensioni di fogli di stile o immagini, richiedendo invece i nostri file mock. Puoi modificare l'espressione regolare per adattarla ai tipi di file gestiti dalla tua configurazione webpack.

suggerimento

Ricorda di includere esplicitamente il trasformatore predefinito babel-jest se desideri utilizzarlo insieme ad altri preprocessori di codice:

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

Configurazione di Jest per trovare i file​

Ora che Jest sa come elaborare i nostri file, dobbiamo dirgli come trovarli. Per le opzioni modules ed extensions di webpack esistono analoghi diretti nelle opzioni moduleDirectories e moduleFileExtensions di Jest.

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',
  },
};
nota

<rootDir> è un token speciale che Jest sostituisce con la root del tuo progetto. Solitamente corrisponde alla cartella contenente il tuo package.json, a meno che non specifichi un'opzione personalizzata rootDir nella configurazione.

Allo stesso modo, la controparte in Jest di resolve.roots di webpack (alternativa all'impostazione di NODE_PATH) è 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',
  },
};

Infine, dobbiamo gestire gli alias di webpack. Per questo possiamo nuovamente utilizzare l'opzione moduleNameMapper.

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',
  },
};

Tutto qui! webpack è uno strumento complesso e flessibile, quindi potresti dover apportare alcune modifiche per adattarlo alle esigenze specifiche della tua applicazione. Fortunatamente, per la maggior parte dei progetti Jest è più che sufficientemente flessibile per gestire la tua configurazione webpack.

suggerimento

Per configurazioni webpack più complesse, potresti valutare progetti come: babel-plugin-webpack-loaders.

Utilizzo con webpack​

Oltre a installare babel-jest come descritto in precedenza, dovrai aggiungere @babel/preset-env in questo modo:

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

Successivamente, configurerai Babel come segue:

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

Jest memorizza nella cache i file per velocizzare l'esecuzione dei test. Se hai aggiornato .babelrc e Jest non funziona come previsto, prova a cancellare la cache eseguendo jest --clearCache.

suggerimento

Se utilizzi gli import dinamici (import('some-file.js').then(module => ...)), devi abilitare il plugin dynamic-import-node.

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

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

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

Per un esempio di utilizzo di Jest con webpack e React, puoi consultarne uno qui.