Angular 8和jest -找不到文件: jest-preset-angular/InlineHtmlStripStylesTransformer.js

Question

我刚刚使用cli (v8 -最新版本)创建了angular应用程序。到目前为止，我没有做什么特别的事情。(ng new ng-app)。

我使用jest-schematic将jest添加到我的angular项目中。

cd ng-app
ng add @briebug/jest-schematic

问题是当我使用以下命令运行测试时，我得到一个错误：npm run test

> jest

 FAIL  src/app/app.component.spec.ts
  ● Test suite failed to run

    File not found: jest-preset-angular/InlineHtmlStripStylesTransformer.js (resolved as: C:\ng-app\jest-preset-angular\InlineHtmlStripStylesTransformer.js)

这里缺少什么？我该怎么解决这个问题呢？

Answer 1

在jest-preset-angular documentation中，当前的配置是：jest-preset-angular/build/InlineFilesTransformer。

因此，在您的package.json中更改以下代码行：

   "astTransformers": [
      "jest-preset-angular/InlineHtmlStripStylesTransformer.js"
   ]

至

"astTransformers": [
   "jest-preset-angular/build/InlineFilesTransformer",
   "jest-preset-angular/build/StripStylesTransformer"
]

Answer 2

对我来说，package.json中不存在astTransformers。经过详尽的搜索，该条目位于jest.impl.js中的第24行。

(角度8.2.1。使用@nrwl/angular 8.2.7)

除此之外，同样的更改也适用，将该行更改为：

"astTransformers": [
   "jest-preset-angular/build/InlineFilesTransformer",
   "jest-preset-angular/build/StripStylesTransformer"
]

请注意jest团队对该行的评论：

 // TODO: This is hacky, We should probably just configure it in the user's workspace 
// If jest-preset-angular is installed, apply settings

我当然不喜欢编辑这个文件，但是将更改放到jest.config文件中并没有起到作用(我希望库会将其作为选项)，而且如果它确实属于package.json中的某个位置，我也不知道它属于哪里。

Answer 3

已接受答案的语法已更改。如果您需要在Angular 12.x或@nrwl/angular 12.x上执行此操作，请尝试-

在jest.config.js中-

 module.exports = {
        // [...]
        globals: {
            'ts-jest': {
                astTransformers: {
                    before: [
                        'jest-preset-angular/build/InlineFilesTransformer',
                        'jest-preset-angular/build/StripStylesTransformer',
                    ],
                },
            },
        },
    }

在package.json中-

{
    "jest": {
        "globals": {
            "ts-jest": {
                "astTransformers": {
                    "before": [
                        "jest-preset-angular/build/InlineFilesTransformer",
                        "jest-preset-angular/build/StripStylesTransformer"
                    ]
                }
            }
        }
    }
}

参考- Link