Тестирование с псевдонимами Jest и Webpack

Я ищу возможность использовать псевдонимы webpack для разрешения импорта при использовании jest и оптимально ссылаться на 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-псевдоним, babel-плагин-модуль-решатель и Jest / Webpack docs

18
javascript jestjs reactjs webpack webpack-2

3 ответов

Так как у меня была та же проблема, прежде чем я прочитал снова, и на этот раз более тщательно документацию. Правильный конфиг должен быть:

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

кажется, это исправлено.

Ниже приведена рабочая настройка:

версии

"jest": "~20.0.4"

"webpack": "^3.5.6"

пакета.в JSON

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

webpack.общий.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'),
};
5

FWIW, попробуйте переключить порядок псевдонимов, держите более конкретный вверх и менее конкретный вниз, например 

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