バージョン: 30.0

webpackとの併用

非公式ベータ版翻訳

このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。エラーを見つけましたか？問題を報告 →

Jestは、アセットやスタイル、コンパイルを管理するためにwebpackを使用しているプロジェクトで利用できます。webpackは、スタイルシートや画像・フォントなどのアセット、そしてJavaScriptにコンパイルする言語やツールの広大なエコシステムを管理できるようにアプリケーションに直接統合されるため、他のツールに比べて独特の課題があります。

webpackの例

一般的なwebpack設定ファイルから始めて、それを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',
    ],
  },
};

Babelで変換されるJavaScriptファイルがある場合、babel-jestプラグインをインストールすることでBabelサポートを有効にできます。Babel以外のJavaScript変換は、Jestのtransform設定オプションで処理できます。

静的アセットの扱い

次に、スタイルシートや画像などのアセットファイルを適切に扱うようにJestを設定しましょう。通常これらのファイルはテストでは特に有用ではないため、安全にモック化できます。ただしCSS Modulesを使用している場合は、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',
  },
};

モックファイル自体は以下のようになります：

__mocks__/styleMock.js
module.exports = {};

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

CSS Modulesのモック

CSS ModulesをモックするにはES6 Proxyを使用できます：

npm
Yarn
pnpm
Bun

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

yarn add --dev identity-obj-proxy

pnpm add --save-dev identity-obj-proxy

bun add --dev identity-obj-proxy

これによりstylesオブジェクトのすべてのclassName参照がそのまま返されます（例: styles.foobar === 'foobar'）。これは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',
  },
};

moduleNameMapperが要件を満たせない場合、Jestのtransform設定オプションでアセット変換方法を指定できます。例: require('logo.jpg');が'logo'を返すファイルベース名変換は以下のように記述します：

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

スタイルシートや画像拡張子に一致するファイルを無視し、代わりにモックファイルを読み込むようJestに指示しました。正規表現はwebpack設定が扱うファイルタイプに合わせて調整可能です。

ヒント

追加のコードプリプロセッサと併用する場合、デフォルトのbabel-jestトランスフォーマーを明示的に含めることを忘れないでください：

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

ファイル検索の設定

Jestがファイルを処理できるようになったので、次にそれらを_検索_する方法を指示します。webpackのmodulesとextensionsオプションに対応するのが、JestのmoduleDirectoriesとmoduleFileExtensionsです。

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

メモ

<rootDir>はJestがプロジェクトルートに置き換える特別なトークンです。通常これはpackage.jsonがあるフォルダですが、設定でカスタムrootDirを指定している場合は除きます。

同様に、webpackのresolve.roots（NODE_PATH設定の代替）に対応するJestのオプションは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',
  },
};

最後にwebpackのaliasを扱うため、再び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',
  },
};

以上です！webpackは複雑で柔軟なツールなので、特定のアプリケーション要件に合わせて調整が必要な場合があります。幸い多くのプロジェクトでは、Jestはwebpack設定を処理するのに十分な柔軟性を備えています。

ヒント

より複雑なwebpack設定の場合は、babel-plugin-webpack-loadersなどのプロジェクトも検討すると良いでしょう。