webentwicklung-frage-antwort-db.com.de

Jest + TypeScript + Absolute Pfade (baseUrl) geben Fehler aus: Kann Modul nicht finden

Ich stelle eine Konfiguration ein, um meine Tests in einer Create-React-App + TypeScript-App ( von der ich ausgeworfen habe ) auszuführen. Ich benutze Scherz + Enzym. In meiner tsconfig.json habe ich baseUrl='./src' gesetzt, damit ich beim Importieren von Modulen absolute Pfade verwenden kann. Dies ist beispielsweise eine typische Importanweisung in einer meiner Dateien:

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

Sie können sehen, dass der Pfad absolut (aus dem Ordner/src) und nicht relativ ist. Dies funktioniert gut, wenn ich im Debug-Modus (yarn start) laufe

Aber wenn ich meinen Test (yarn test) ausführe, erhalte ich diesen Fehler:

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

Es sieht also so aus, als ob Jest diesen absoluten Pfad nicht auflösen kann, obwohl ich ihn in meiner tsconfig.json eingerichtet habe. Dies ist meine 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"
  ]
}

Jetzt kann ich sehen, dass sich im Stammverzeichnis meines Projekts ein generierter tsconfig.test.json befindet. Dies ist die für den Test verwendete Konfiguration. Und hier ist sein Inhalt:

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

Wie Sie sehen, ist das "Modul" hier commonjs, während es in der Standardkonfiguration esnext ist. Könnte dies ein Grund sein?

War jemand in der Lage, sein TypeScript-Projekt mit Jest und absolutem Pfad zu testen? oder ist das ein bekannter Fehler? Gibt es einige Einstellungen in meiner Webpack-Konfiguration, seit ich die Standardkonfiguration verlassen habe?

Vielen Dank für Ihre Eingabe und Anregung.

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

Wie bereits erwähnt, muss moduleNameMapper in jest.config.js Die in tsconfig.json Angegebenen Pfade definieren. Zum Beispiel, wenn Sie Pfade in tsconfig.json Wie folgt definiert haben

// tsconfig.json
{
 ...
 "baseUrl": "src",
 "paths": {
    "@alias/*": [ 'path/to/alias/*' ]
 }
 ...
}

dann muss Ihr jest.config.js diese Pfade in moduleNameMapper im folgenden Format bereitstellen:

// jest.config.js
module.exports = {
    'roots': [
        '<rootDir>/src'
    ],
    'transform': {
        '^.+\\.tsx?$': 'ts-jest'
    },
    'moduleNameMapper': {
         '@alias/(.*)': '<rootDir>/src/path/to/alias/$1'
    }
};

Damit können wir unseren jest.config.js Verbessern, um Pfade, die in tsconfig.json Definiert sind, automatisch zu konvertieren. Hier ist ein Gist Code Snippet dafür:

// jest.config.js

function makeModuleNameMapper(srcPath, tsconfigPath) {
    // Get paths from tsconfig
    const {paths} = require(tsconfigPath).compilerOptions;

    const aliases = {};

    // Iterate over paths and convert them into moduleNameMapper format
    Object.keys(paths).forEach((item) => {
        const key = item.replace('/*', '/(.*)');
        const path = paths[item][0].replace('/*', '/$1');
        aliases[key] = srcPath + '/' + path;
    });
    return aliases;
}

const TS_CONFIG_PATH = './tsconfig.json';
const SRC_PATH = '<rootDir>/src';

module.exports = {
    'roots': [
        SRC_PATH
    ],
    'transform': {
        '^.+\\.tsx?$': 'ts-jest'
    },
    'moduleNameMapper': makeModuleNameMapper(SRC_PATH, TS_CONFIG_PATH)
};
2
Tim Osadchiy

So habe ich moduleNameMapper zum Laufen gebracht.

Mit der folgenden Konfiguration in meiner tsconfig:

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

Hier ist der moduleNameMapper:

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

Ich hatte mit dem gleichen Problem zu kämpfen, und tatsächlich stellt sich heraus, dass eine einfache Änderung den Trick zu tun scheint.

Ich habe gerade das Feld moduleDirectories in jest.config.js aktualisiert.

Vor 

moduleDirectories: ['node_modules']

Nach dem 

moduleDirectories: ['node_modules', 'src']

Ich hoffe es hilft,
Antoine

1
Antoine Laffargue

Ich verwende React with TypeScript, entferne react-scripts-ts test --env=jsdom aus npm test und füge jest --watch als Standardtest hinzu, nachdem ich meinem Projekt jest.config.js hinzugefügt habe, indem ich diesen Anweisungen folge https://basarat.gitbooks.io/TypeScript/docs/testing/ jest.html

und ich habe die von @Antonie Laffargue erwähnte Konfiguration verwendet (Eigenschaft hinzufügen/bearbeiten moduleDirectories: ['node_modules', 'src']), es funktioniert einwandfrei.

1
fsilva

meine lösung war,

  "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

Ich hatte ein ähnliches Problem. Ich hoffe, dies könnte dazu beitragen, einigen von Ihnen Zeit zu ersparen.

Mein Problem:

  • mit der create-react-app mit TypeScript
  • verwenden von absoluten Pfaden (src/MyComp) zum Importieren von Komponenten in andere Komponenten (z. B. App.tsx)
  • es arbeitete an compile/run/build
  • es war nicht arbeiten am Test

Ich habe festgestellt, dass der Fehler auf einen anderen Wert von NODE_PATH zurückzuführen ist. Also habe ich es auf Testlauf gesetzt.

Ich habe das Problem und den Fix hier neu erstellt: https: //github.com/alessandrodeste/...

Ich bin mir nicht sicher, ob dies zu Nebenwirkungen bei Tests führen könnte. Lass es mich wissen, wenn du Feedback hast;)

1
Lattanzio

ts-jest kann dieses Problem perfekt lösen!
https://kulshekhar.github.io/ts-jest/user/config/#paths-mapping
ändere einfach jest.config.js wie folgt:

    const { pathsToModuleNameMapper } = require('ts-jest/utils');
    const { compilerOptions } = require('./tsconfig.json');
    module.exports = {
        preset: 'ts-jest',
        moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths)
    }
0
muk

Sie möchten wahrscheinlich die Funktion moduleNameMapper von jest config. Es ordnet Ihre benutzerdefinierten Importnamespaces realen Modulpositionen zu.

siehe offizielle Dokumentation hier:

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

0
akaRem