Using with webpack
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モジュールを利用している場合はクラス名参照のためのプロキシをモックした方が良いでしょう。
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モジュールのモック
CSS ModulesをモックするにはES6 Proxyを使用します:
- npm
- Yarn
- pnpm
npm install --save-dev identity-obj-proxy
yarn add --dev identity-obj-proxy