Aller au contenu principal
Version : Suivant

Utilisation avec webpack

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Jest peut être utilisé dans des projets employant webpack pour gérer les ressources, styles et compilation. webpack présente effectivement des défis spécifiques par rapport à d'autres outils car il s'intègre directement à votre application pour prendre en charge les feuilles de style, ressources comme images et polices, ainsi que l'écosystème étendu des langages et outils compilant vers JavaScript.

Exemple avec webpack​

Commençons par un fichier de configuration webpack typique et adaptons-le pour 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',
    ],
  },
};

Si vous avez des fichiers JavaScript transformés par Babel, vous pouvez activer son support en installant le plugin babel-jest. Les transformations JavaScript non-Babel peuvent être gérées via l'option de configuration transform de Jest.

Gestion des ressources statiques​

Configurons maintenant Jest pour gérer correctement les fichiers de ressources comme feuilles de style et images. Généralement inutiles dans les tests, on peut les simuler sans risque. Toutefois, si vous utilisez CSS Modules, mieux vaut simuler un proxy pour les recherches de 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',
  },
};

Et les fichiers de simulation eux-mêmes :

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

Simulation des CSS Modules​

Vous pouvez utiliser un Proxy ES6 pour simuler les CSS Modules :

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

Ainsi, toutes vos recherches de className sur l'objet styles renverront la valeur telle quelle (ex: styles.foobar === 'foobar'). Très pratique pour les Tests par instantané 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',
  },
};

Si moduleNameMapper ne suffit pas, utilisez l'option transform de Jest pour définir comment transformer les ressources. Par exemple, un transformateur renvoyant le nom de base d'un fichier (où require('logo.jpg'); retourne 'logo') s'écrirait :

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

Nous avons indiqué à Jest d'ignorer les fichiers avec des extensions de style ou image, et d'utiliser nos simulations à la place. Adaptez l'expression régulière aux types gérés par votre configuration webpack.

astuce

N'oubliez pas d'inclure explicitement le transformateur babel-jest par défaut si vous souhaitez l'utiliser conjointement avec d'autres préprocesseurs de code :

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

Configuration de la recherche de fichiers​

Maintenant que Jest sait traiter nos fichiers, indiquons-lui comment les trouver. Les options modules et extensions de webpack ont leurs équivalents directs dans moduleDirectories et moduleFileExtensions de 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',
  },
};
note

<rootDir> est un jeton spécial remplacé par Jest par la racine de votre projet. Généralement, il s'agit du dossier contenant votre package.json, sauf si vous spécifiez une option rootDir personnalisée.

De même, l'équivalent Jest de resolve.roots de Webpack (alternative à NODE_PATH) est 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',
  },
};

Enfin, il reste à gérer les alias de webpack. Pour cela, nous pouvons réutiliser l'option 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',
  },
};

C'est tout ! webpack est un outil complexe et flexible, vous devrez peut-être ajuster pour vos besoins spécifiques. Heureusement, Jest est généralement assez flexible pour gérer votre configuration webpack.

astuce

Pour les configurations webpack complexes, explorez des projets comme babel-plugin-webpack-loaders.

Utilisation avec webpack​

Outre l'installation de babel-jest comme précédemment, ajoutez @babel/preset-env ainsi :

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

Ensuite, configurez Babel comme suit :

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

Jest met en cache les fichiers pour accélérer l'exécution des tests. Si vous avez modifié .babelrc et que Jest ne fonctionne pas comme prévu, essayez de vider le cache en exécutant jest --clearCache.

astuce

Si vous utilisez des imports dynamiques (import('some-file.js').then(module => ...)), vous devez activer le plugin dynamic-import-node.

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

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

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

Pour un exemple d'utilisation de Jest avec webpack et React, vous pouvez en consulter un ici.