The configuration for astTransformers as string[] is deprecated and will be removed in ts-jest 27

[splincode]

🐛 Bug Report

jest --config ./jest.config.js
ts-jest[config] (WARN) The configuration for astTransformers as string[] is deprecated and will be removed in ts-jest 27. Please define your custom AST transformers in a form of an object. More information you can check online documentation https://kulshekhar.github.io/ts-jest/user/config/astTransformers
ts-jest[config] (WARN) The configuration for astTransformers as string[] is deprecated and will be removed in ts-jest 27. Please define your custom AST transformers in a form of an object. More information you can check online documentation https://kulshekhar.github.io/ts-jest/user/config/astTransformers

envinfo

System:
    OS:

Npm packages:
    jest: last
    jest-preset-angular: last
    typescript: last

[matmeylan]

This warning is due to change in ts-jest. Reference here. It can be easily fixed by changing your jest config to something like the following:

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

We should change documentation in this repo.

[ahnpnl]

Yes it is a change in ts-jest configuration for astTransformers.

PR is welcome :)

[EugeneHerasymchuk]

not sure what version worked with proposed solution, but on v26.4.0 this change to object proposed by @mmeylan throws:

TypeError: path.startsWith is not a function

      at ConfigSet.resolvePath (node_modules/ts-jest/dist/config/config-set.js:717:18)
      at node_modules/ts-jest/dist/config/config-set.js:175:41
          at Array.map (<anonymous>)
      at ConfigSet.get (node_modules/ts-jest/dist/config/config-set.js:174:49)
      at ConfigSet.<anonymous> (node_modules/ts-jest/dist/utils/memoize.js:44:24)
      at ConfigSet.get (node_modules/ts-jest/dist/config/config-set.js:364:37)
      at ConfigSet.<anonymous> (node_modules/ts-jest/dist/utils/memoize.js:44:24)
      at ConfigSet.get (node_modules/ts-jest/dist/config/config-set.js:583:50)
      at ConfigSet.<anonymous> (node_modules/ts-jest/dist/utils/memoize.js:44:24)
      at ConfigSet.get (node_modules/ts-jest/dist/config/config-set.js:603:25)```

[ahnpnl]

if you install 8.3.1, it should fix the issue.

[tcoz]

Note the link in the console when running tests, and the link in this thread above, leads to a "Not Found".

[matmeylan]

This warning is due to change in ts-jest. Reference here. It can be easily fixed by changing your jest config to something like the following:

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

We should change documentation in this repo.

Note that starting from v9 of jest-preset-angular, transformers are removed. The breaking changes section describes very well the steps to migrate.

[jeserkin]

@mmeylan are those transformers still available from some other library/package, because I feel that due to them being removed, now snapshots contain much more information, that might not be useful. Not sure about it at the same time.

I did read, that

jest-preset-angular uses AST transformers from @angular/compiler-cli and @ngtools/webpack

[ahnpnl]

@jeserkin why do you need those old AST transformers? The AST transformers from Angular do the same job as the old ones. AST transformers modify input TS to produce a different JS output.

Snapshot is a different thing. Snapshot is related to Jest snapshot serializers which isn't changed at all. We only changed the snapshot serializer paths.

[jeserkin]

@ahnpnl Interesting. For some reason with update to Angular 13 and all related libraries snapshots have changed. E.g.:

- <stateportal-contact-group-card>
+ <ng-component
+   accessKey=""
+   align=""
+   assignedSlot={null}
+   childElementCount={1}
+   class=""
+   className=""
+   clientHeight={0}
+   clientLeft={0}
+   clientTop={0}
+   clientWidth={0}
+   dir=""
+   draggable={false}
+   hidden={false}
+   id="root1"
+   lang=""

It is entirely possible, that it is not related to those transformers, just felt based on the names, that might be. Or:

-         <a
-           click={[Function]}
-           href="/"
-           ng-reflect-router-link={null}
-           target={null}
        >
+         <a>