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

Question

I just created angular application using the cli (v8 - last version from today). nothing special I done so far. ( ng new ng-app ).

I use jest-schematic to add jest to my angular project.

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

The problem is I get an error when I run the test using: 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)

What is missing here? How do I fix that?

Answer 1

In the jest-preset-angular documentation , the corrent configuration is this: jest-preset-angular/build/InlineFilesTransformer .

So change in your package.json the lines from:

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

to

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

Answer 2

For me, astTransformers does not exist in package.json. Searching exhaustively, the entry is in jest.impl.js, on line 24.

(Angular 8.2.1. using @nrwl/angular 8.2.7)

Aside from that, the same changes apply, change the line to:

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

Note the comment from the jest team on that line:

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

I definitely don't like editing that file, but putting the change in the jest.config files didn't do the trick (I was hoping the lib would pick it up as options), and if it does belong somewhere in package.json, I don't know where.

Answer 3

The accepted answer's syntax has changed. If you need to do this on Angular 12.x or @nrwl/angular 12.x then try -

In jest.config.js -

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

In package.json -

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

Reference - Link

Answer 4

The answers are now obsolete (I am on Jest 27.5.1). What helped me was to remove astTransformers from jest.config.js because they were removed from jest-preset-angular. What helped me was to add this to jest.config.js:

 module.exports = {... transform: { '^.+.(ts|mjs|js|html)$': 'jest-preset-angular' }, transformIgnorePatterns: ['node_modules/(?..*,mjs$)']. ... }

This is explained in greater detail here: https://github.com/nrwl/nx/issues/7844

It is written for Nx, but it also applies to vanilla Angular.