如何在jest.config.js中设置tsconfig路径。Angular 8. jest-preset-angular

Question

我在我的tsconfig中设置了绝对路径，这些路径在服务期间按预期工作，但不能用于jest。

示例路径如下所示：

"paths": {
    "@shared": "src/app/shared/index.ts"
}

然后在我可以使用的组件中

import { MySharedComponent, MyOtherSharedComponent } from '@shared';

我目前正在尝试使用Jest进行测试。在我的jest.config.js中有一个moduleNameMapper部分：

moduleNameMapper: {
    '@shared/(.*)': 'src/app/shared/$1'
}

这会导致

cannot find module @Shared

如果我将tsconfig路径更改为：

"paths": {
    "@shared/*": "src/app/shared/*"
}

这些不再起作用了

import { MySharedComponent, MyOtherSharedComponent } from '@shared';

并必须更新到此

import { MySharedComponent } from '@shared/my-shared.component';
import { MyOtherSharedComponent } from '@shared/my-other-shared.component';

测试运行良好，项目运行正常，但这是一个大型项目，我有数百个使用此格式的导入

import { MySharedComponent, MyOtherSharedComponent } from '@shared';

有没有一种方法可以让moduleNameMapper使用此路径

"@shared": "src/app/shared/index.ts"

Answer 1

在tsconfig.json中，可以有多个用于@shared的paths，一个用于index.ts，其他用于子路径：

"paths": {
    "@shared": "src/app/shared/index.ts",
    "@shared/*": "src/app/shared/*"
}

对于moduleNameMapper，您还可以添加第二个：

moduleNameMapper: {
    '@shared/(.*)': 'src/app/shared/$1',
    '@shared': 'src/app/shared/index.ts'
}