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.
