webentwicklung-frage-antwort-db.com.de

Testen mit Jest- und Webpack-Aliasnamen

Ich möchte in der Lage sein, Webpack-Aliase zu verwenden, um Importe bei Verwendung von Jest aufzulösen und optimalerweise den webpack.aliases zu referenzieren, um Doppelarbeit zu vermeiden.

Jest Conf:

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

Webpack-Aliase:

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

Importe:

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

Aus irgendeinem Grund verursacht @ Probleme. Wenn es entfernt wird (sowohl in Alias ​​als auch im Import), kann es shared finden, aber components kann immer noch nicht aufgelöst werden.

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

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

Ich habe versucht, jest-webpack-alias , babel-plugin-module-resolver und die Jest/Webpack-Dokumente

22
speak

Dies scheint behoben worden zu sein.

Unten ist ein Arbeitsaufbau:

Versionen

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

Da hatte ich das gleiche Problem, bevor ich wieder lese, und diesmal sorgfältiger die Dokumentation. Die korrekte Konfig sollte sein:

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

FWIW, Versuchen Sie, die Alias-Reihenfolge zu ändern. 

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