[解決済み] JestとWebpackのエイリアスを使ったテスト

質問

jestを使用する際に、webpackのaliasesを使ってimportを解決し、最適な形で webpack.aliases を使用することで、重複を避けることができます。

ジェストコンフ

  "jest": {
    "modulePaths": ["src"],
    "moduleDirectories": ["node_modules"],
    "moduleNameMapper": {
      "^@shared$": "<rootDir>/shared/",
      "^@components$": "<rootDir>/shared/components/"
    }
  },

Webpackのエイリアスです。

exports.aliases = {
    '@shared': path.resolve(paths.APP_DIR, 'shared'),
    '@components': path.resolve(paths.APP_DIR, 'shared/components'),
};

輸入品です。

import Ordinal from '@shared/utils/Ordinal.jsx';
import Avatar from '@components/common/Avatar.jsx';

なぜか @ が問題を起こすので、(エイリアスでもインポートでも)削除すると shared けど components は、まだ解決できない。

 FAIL  src/shared/components/test/Test.spec.jsx
  ● Test suite failed to run

    Cannot find module '@shared/utils/Ordinal.jsx' from 'Test.jsx'

を使ってみました。 jest-webpack-alias , バベルプラグインモジュールリゾルバ とのことです。 Jest/Webpackのドキュメント

どのように解決するのですか？

これは修正されたようです。

以下は、動作中の設定です。

バージョン

"jest": "~20.0.4"

"webpack": "^3.5.6"

パッケージ.json

"jest": {
  "moduleNameMapper": {
    "^@root(.*)$": "<rootDir>/src$1",
    "^@components(.*)$": "<rootDir>/src/components$1",
  } 
}

webpack.shared.js

const paths = {
  APP_DIR: path.resolve(__dirname, '..', 'src'),
};

exports.resolveRoot = [paths.APP_DIR, 'node_modules'];

exports.aliases = {
  '@root': path.resolve(paths.APP_DIR, ''),
  '@components': path.resolve(paths.APP_DIR, 'components'),
};