web-dev-qa-db-ja.com

JestおよびWebpackエイリアスを使用したテスト

Jestを使用する場合、webpackエイリアスを使用してインポートを解決し、最適にはwebpack.aliases重複を避けます。

Jest conf：

  "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 、 babel-plugin-module-resolver および Jest/Webpack docs を使用してみました

javascriptreactjswebpackjestjswebpack-2
33
speak

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

作業セットアップは次のとおりです。

バージョン

"jest": "~20.0.4"

"webpack": "^3.5.6"

package.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'),
};
18
speak

もう一度読む前に同じ問題を抱えていたので、今回はより注意深くドキュメントを読みました。正しい構成は次のとおりです。

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

FWIW、エイリアスの順序を切り替えてみてください、より具体的なアップを維持し、より具体的でないダウンを維持してください。

"moduleNameMapper": {
  "^@components$": "<rootDir>/shared/components/",
  "^@shared$": "<rootDir>/shared/"
}
1
hazardous