javascript - react - Pruebas con alias Jest y Webpack

react apollo skip

Question

Estoy buscando poder usar alias de webpack para resolver las importaciones cuando se usa jest, y de manera óptima, hacer referencia a webpack.aliases para evitar la duplicación.

Jest conf

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

Alias ​​de paquetes web:

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

Importaciones:

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

Por alguna razón, la @ causa problemas, por lo tanto, cuando se elimina (tanto en el alias como en la importación), puede encontrar elementos shared pero aún no se pueden resolver.

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

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

He intentado usar jest-webpack-alias , babel-plugin-module-resolver y los documentos de Jest / Webpack

Answer 1

Esto parece haber sido arreglado.

A continuación se muestra una configuración de trabajo:

Versiones

"jest": "~20.0.4"

"webpack": "^3.5.6"

paquete.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

FWIW, intente cambiar el orden de alias, mantenga más específico hacia arriba y menos específico hacia abajo, por ejemplo

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

Answer 3

Ya que tuve el mismo problema antes de volver a leer, y esta vez más cuidadosamente la documentación. La configuración correcta debe ser:

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