Aller au contenu principal
Version : 26.x

Utilisation avec webpack

Jest peut être utilisé dans les projets qui utilisent webpack pour gérer les ressources, les styles et la compilation. webpack doit offrir quelques défis uniques par rapport à d'autres outils car il s'intègre directement à votre application pour permettre la gestion des feuilles de style, des ressources comme les images et les polices, ainsi que l'écosystème expansif des langages et outils de compilation vers JavaScript.

Un exemple avec Webpack​

Commençons par un fichier de configuration commun de webpack et transposons-le dans une configuration 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 qui sont transformés par Babel, vous pouvez activer le support de Babel en installant le plugin babel-jest. Les transformations JavaScript non-Babel peuvent être gérées avec l'option de config transform de Jest.

Gestion des ressources statiques​

Ensuite, configurons Jest pour qu'il gère de manière efficace les fichiers de ressources tels que les feuilles de style et les images. En général, ces fichiers ne sont pas particulièrement utiles dans les tests, nous pouvons donc les éliminer sans risque. Toutefois, si vous utilisez des modules CSS, il est préférable de simuler un proxy pour vos 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 simulés eux-mêmes :

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

Simulé CSS Modules​

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

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

Ensuite, toutes vos recherches de className sur l'objet styles seront retournées telles quelles (par exemple, styles.foobar === 'foobar'). C'est assez pratique pour le test de Snapshot de 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 peut pas répondre à vos besoins, vous pouvez utiliser l'option de configuration transform de Jest pour spécifier comment les ressources sont transformées. Par exemple, un transformateur qui retourne le nom de base d'un fichier (tel que require('logo.jpg'); qui retourne 'logo') peut être écrit ainsi :

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

module.exports = {
  process(src, filename, config, options) {
    return `module.exports = ${JSON.stringify(path.basename(filename))};`;
  },
};
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 dit à Jest d'ignorer les fichiers correspondant à une extension de feuille de style ou d'image, et à la place, de demander nos fichiers simulés. Vous pouvez ajuster l'expression régulière pour qu'elle corresponde aux types de fichiers que votre configuration webpack gère.

astuce

N'oubliez pas d'inclure explicitement le transformateur par défaut babel-jest, si vous souhaitez l'utiliser en parallèle avec des préprocesseurs de code supplémentaires :

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

Configuration de Jest pour trouver nos fichiers​

Maintenant que Jest sait comment traiter nos fichiers, nous devons lui dire comment les trouver. For webpack's modules, and extensions options there are direct analogs in Jest's moduleDirectories and moduleFileExtensions options.

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

<rootDir> is a special token that gets replaced by Jest with the root of your project. La plupart du temps, il s'agira du dossier où se trouve votre package.json, sauf si vous spécifiez une option rootDir personnalisée dans votre configuration.

De même, l'option resolve.root de webpack fonctionne comme la définition de la variable env NODE_PATH, que vous pouvez définir, ou faire appel à l'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',
  },
};

Et enfin, nous devons gérer l'alias webpack. Pour cela, nous pouvons à nouveau 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. Il se peut donc que vous deviez procéder à quelques ajustements pour répondre aux besoins spécifiques de votre application. Heureusement pour la plupart des projets, Jest devrait être plus que suffisamment flexible pour gérer votre configuration webpack.

astuce

For more complex webpack configurations, you may also want to investigate projects such as: babel-plugin-webpack-loaders.

Utilisation avec webpack​

In addition to installing babel-jest as described earlier, you'll need to add @babel/preset-env like so:

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

Then, you'll want to configure Babel as follows:

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

Jest caches files to speed up test execution. If you updated .babelrc and Jest is not working as expected, try clearing the cache by running jest --clearCache.

astuce

Si vous utilisez des importations 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"]
    }
  }
}

For an example of how to use Jest with webpack with React, you can view one here.