jestjs - Hur man använder path-alias i ett React-projekt med Typescript + Jest


Jag har använt jest för enhetstestning i mitt react-projekt (typescript). Nu har jag aktiverat path alias i webpack och tsconfig. För att kunna använda path alias med jest har jag följt denna handledning. Men jag får detta fel när jag kör mina tester:

Här är min webpack-konfiguration för att aktivera sökvägsalias:

alias: {
  'ui': path.resolve(__dirname, 'src/framework/components/ui')
}

Här är min Jest-konfiguration för att aktivera sökvägsalias (package.json)

"moduleNameMapper": {
    "ui": "<rootDir>/src/framework/components/ui/"
}

Jag provade också denna version från handledningen:

"moduleNameMapper": {
   "^ui/(.*)$1": "<rootDir>/src/framework/components/ui/$1"
}

Slutligen här är min tsconfig.json-konfiguration:

"baseUrl": "src",
"paths": {
  "ui": ["framework/components/ui"]      
}

När jag kör mitt test löser jest faktiskt vägaliaset. Men det misslyckas med att plocka upp komponenter som exponeras som standard. Till exempel denna rad:

import Button from './FormComponents/Button';

misslyckas eftersom 'Button' exporteras som standard från sin modul.

Jag hoppas att min fråga är begriplig. Tack på förhand för din hjälp.

Svar #1

Använd ts-jest https://huafu.github.io/ts-jest/user/config/#jest-config-with-helper:

// jest.config.js
const { pathsToModuleNameMapper } = require('ts-jest/utils');
// In the following statement, replace `./tsconfig` with the path to your `tsconfig` file
// which contains the path mapping (ie the `compilerOptions.paths` option):
const { compilerOptions } = require('./tsconfig');

module.exports = {
  // [...]
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths /*, { prefix: '<rootDir>/' } */ )
};

Svar #2

Försök

"moduleNameMapper": {
   "^ui/(.*)": "<rootDir>/src/framework/components/ui/$1"
}

Det borde inte finnas $1 i regexen eftersom $1 används i ersättningssträngen för att infoga den fångade texten.

Till exempel, i ditt exempel skulle "Button" fångas av (.*) och sedan användas istället för $1 i ersättningssträngen.

Relaterade artiklar