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

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

Yarn

yarn add --dev identity-obj-proxy

pnpm

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

remarque

<rootDir> is a special token that gets replaced by Jest with the root of your project. Most of the time this will be the folder where your package.json is located unless you specify a custom rootDir option in your configuration.

Similarly, Jest's counterpart for Webpack's resolve.roots (an alternative to setting NODE_PATH) is 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

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

Yarn

yarn add --dev @babel/preset-env

pnpm

pnpm add --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.