web-dev-qa-db-fra.com

Jest + TypeScript + chemins absolus (baseUrl) génère une erreur: module introuvable

Je suis en train de configurer une configuration pour exécuter mes tests dans une application create-react-app + TypeScript ( à partir de laquelle j'ai éjecté ). J'utilise jest + enzyme. Dans mon tsconfig.json, j'ai défini baseUrl='./src' pour pouvoir utiliser des chemins absolus lors de l'importation de modules. Par exemple, il s'agit d'une instruction d'importation typique dans l'un de mes fichiers:

import LayoutFlexBoxItem from 'framework/components/ui/LayoutFlexBoxItem';

Vous pouvez voir que le chemin est absolu (à partir du dossier/src) et non relatif. Cela fonctionne bien lorsque je suis en mode débogage (yarn start)

Mais quand je lance mon test (yarn test), j'obtiens cette erreur:

 Cannot find module 'framework/components/Navigation' from 'index.tsx'

Donc, il semblerait que jest ne soit pas capable de résoudre ce chemin absolu bien que je l’aie configuré dans mon tsconfig.json. Voici mon tsconfig.json:

{
  "compilerOptions": {
    "outDir": "dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "baseUrl": "./src"    
  },
  "exclude": [
    "node_modules",
    "build",
    "dist",
    "config",    
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ]
}

Maintenant, je peux voir qu’un tsconfig.test.json est généré à la racine de mon projet. C'est la configuration ts utilisée pour le test. Et voici son contenu:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "commonjs"
  }
}

Comme vous pouvez le voir, le "module" est commonjs ici alors que dans la configuration par défaut, il s'agit de esnext. Cela pourrait-il être une raison?

Quelqu'un a-t-il été en mesure de tester son projet TypeScript avec Jest et le chemin absolu? ou est-ce un bug connu? Depuis que je suis éjecté de la configuration par défaut, y a-t-il des paramètres à définir dans la configuration de mon pack Web?

Merci pour votre contribution et votre suggestion.

typescriptvisual-studio-codejestjscreate-react-appabsolute-path
4
TheSoul

Voici comment j'ai fait fonctionner moduleNameName.

Avec la configuration ci-dessous dans mon tsconfig: 

    "paths": {
      "@App/*": [
        "src/*"
      ],
      "@Shared/*": [
        "src/Shared/*"
      ]
    },

Voici le moduleNameName:

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

Je me débattais avec le même problème et il s’avère qu’un simple changement semble suffire.

Je viens de mettre à jour le champ moduleDirectories dans jest.config.js

Avant 

moduleDirectories: ['node_modules']

Après 

moduleDirectories: ['node_modules', 'src']

J'espère que ça aide,
Antoine

1
Antoine Laffargue

J'ai utilisé React avec TypeScript, j'ai supprimé react-scripts-ts test --env=jsdom de npm test et ajouté jest --watch comme test par défaut, après avoir ajouté jest.config.js à mon projet en suivant ces instructions https://basarat.gitbooks.io/TypeScript/docs/testing/jest .html

et j’ai utilisé la configuration mentionnée par @Antonie Laffargue (ajouter/modifier la propriété moduleDirectories: ['node_modules', 'src']), cela fonctionne parfaitement.

1
fsilva

ma solution était, 

  "jest": {
    "moduleDirectories": [
      "node_modules",
      "src"
    ],
    "moduleFileExtensions": [
      "js",
      "json",
      "ts"
    ],
    "roots": [
      "src"
    ],
    "testRegex": ".spec.ts$",
    "transform": {
      "^.+\\.(t|j)s$": "ts-jest"
    },
    "coverageDirectory": "../coverage",
    "testEnvironment": "node",
    "moduleNameMapper": {
      "src/(.*)": "<rootDir>/src/$1"
    }
  }
1
Necmttn

J'avais un problème similaire. J'espère que cela pourrait vous aider à gagner du temps.

Mon problème:

  • en utilisant create-react-app avec TypeScript
  • utiliser des chemins absolus (src/MyComp) pour importer des composants à l'intérieur d'autres composants (par exemple, App.tsx)
  • il travaillait sur compiler/exécuter/construire
  • c'était not travail sur test

J'ai trouvé que l'erreur était due à une valeur différente de NODE_PATH. Je l'ai donc mis sur des tests. 

J'ai recréé le problème et le correctif ici: https: //github.com/alessandrodeste/...

Je ne sais pas si cela pourrait avoir des effets secondaires sur les tests. Faites-moi savoir si vous avez des commentaires;)

1
Lattanzio

Vous voulez probablement la fonctionnalité moduleNameMapper de jest config. Elle mappera vos espaces de noms d'importation personnalisés sur des emplacements de modules réels.

voir la documentation officielle ici:

https://facebook.github.io/jest/docs/fr/configuration.html#modulenamemapper-object-string-string

0
akaRem