使用 Jest 和 Webpack 別名進行測試

Question

我希望能夠在使用 jest 時使用 webpack 別名來解析導入，並且最好參考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 、 babel-plugin-module-resolver和Jest/Webpack 文檔

Answer 1

這似乎已經修復。

下面是一個工作設置：

版本

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

Answer 2

因為我在再次閱讀之前遇到了同樣的問題，這次更仔細地閱讀了文檔。 正確的配置應該是：

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

Answer 3

使用： "jest": "^26.5.3",和"webpack": "4.41.5",我能夠將 jest.config.js 中的jest.config.js /typescript 別名與以下模式正確匹配：

網絡包配置：

module.exports = {
   // the rest of your config
    resolve: {
      alias: {
        'components': path.resolve(__dirname, 'js/app/components'),
        'modules': path.resolve(__dirname, 'js/app/modules'),
        'types': path.resolve(__dirname, 'js/types'),
        'hooks': path.resolve(__dirname, 'js/app/hooks'),
        'reducers': path.resolve(__dirname, 'js/app/reducers'),
        '__test-utils__': path.resolve(__dirname, 'js/app/__test-utils__') 
      }
    },
}

Jest.config.js：

  moduleNameMapper: {
    '^types/(.*)$':  '<rootDir>/js/types/$1',
    '^components/(.*)$': '<rootDir>/js/app/components/$1',
    '^modules/(.*)$':  '<rootDir>/js/app/modules/$1',
    '^hooks/(.*)$':  '<rootDir>/js/app/hooks/$1',
    '^reducers/(.*)$':  '<rootDir>/js/app/reducers/$1',
    '^__test-utils__/(.)$': '<rootDir>/js/app/__test-utils__/$1' 
  }

下面是對符號的解釋：

• (.*)$ ：捕獲完全匹配之后的任何內容（目錄）
• $1 ：將它映射到我指定的目錄中的這個值。

和 tsconfig.json：

    "paths": {
      "config": ["config/dev", "config/production"],
      "components/*": ["js/app/components/*"],
      "modules/*": ["js/app/modules/*"],
      "types/*": ["js/types/*"],
      "hooks/*": ["js/app/hooks/*"],
      "reducers/*": ["js/app/reducers/*"],
      "__test-utils__/*": ["js/app/__test-utils__/*"]
    }

Answer 4

對於使用@作為其模塊root的任何人，您必須更加具體，因為其他庫可以在節點模塊中使用@ 。

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

它轉換為“任何與@/匹配的東西都應該發送到<rootDir>/src/<rest of the path>

Answer 5

FWIW，嘗試切換別名順序，保持更具體的向上和不太具體的向下，例如

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

Answer 6

這是一個真正的瘋狂，但是當我嘗試像這樣在 package.json 中映射模塊時：

"jest": {
  "moduleNameMapper": {
    '@root/(.*)': '<rootDir>/../$1'
  }
}

它不起作用。

但是當我在jest.config.js中做同樣的事情時，它會起作用：

module.exports = {
   moduleNameMapper: {
     '@root/(.*)': '<rootDir>/../$1'
   }
}

Answer 7

建議的答案都不適合我。

能夠使用以下模式解決它：

開玩笑版 25+

moduleNameMapper: {
    '^Screens(.*)': '<rootDir>/src/screens/$1',
    '^Components(.*)': '<rootDir>/src/components/$1',
    '^Assets(.*)': '<rootDir>/src/assets/$1',
    '^Services/(.*)': '<rootDir>/src/services/$1',
  },

Answer 8

這個解決方案對我很有效：

moduleNameMapper: {
    '^Screens(.*)': '<rootDir>/src/screens/$1',
    '^Components(.*)': '<rootDir>/src/components/$1',
    '^Assets(.*)': '<rootDir>/src/assets/$1',
    '^Services/(.*)': '<rootDir>/src/services/$1',
  },

Answer 9

假設您的 webpack 別名位於“resolved_pa​​ths”塊中的 webpack.yml 中。

要在 jest 中添加相同的別名，如果您的 jest 配置位於 package.json 中，請使用moduleDirectories ：

 "jest":{ "moduleDirectories":[ ".", "<rootDir>/shared/components/", "<rootDir>/shared/", "node_modules" ] }