Jest 29 async await transform

[JiaLiPassion]

Please do not submit this issue.

Hi @ahnpnl

There is an issue in Angular side,
angular/angular#49110

And I would like to confirm in the Jest29 and jest-preset-angular 13+, the async/await will still be downgraded to Promise, is that correct?

Thank you.

• I understand

[ahnpnl]

Hi @JiaLiPassion, in v13, we removed the hardcoded tsconfig to be below es2017 which triggers the issue. We have updated documentation https://thymikee.github.io/jest-preset-angular/docs/getting-started/installation#configuration as well as mentioned in README and CHANGELOG about the change.

As long as users use target es2015 or es2016 there won’t be any problems.

[JiaLiPassion]

@ahnpnl , thank you, and I saw the new README to mention this change, in @angular/cli, es2017+ targets are supported, but async/await is still being downleveled to Promise, https://github.com/angular/angular-cli/blob/5a171ddff66ff366089616736baf7545fe44f570/packages/angular_devkit/build_angular/src/babel/presets/application.ts#L235

Should jest-preset-angular also apply this behavior?

[ahnpnl]

Ah ha thank you for the information. I think those babel plugins should be included in this preset then.

[JiaLiPassion]

@ahnpnl , Got it, thank you.

[JiaLiPassion]

@ahnpnl , I am trying the guide here https://thymikee.github.io/jest-preset-angular/docs/guides/using-with-babel

1. create a babel.config.js.

module.exports = function (api) {
  api.cache(true);

  const presets = ["@babel/preset-env"];
  const plugins = [
    "@babel/plugin-transform-async-to-generator",
    "@babel/plugin-proposal-async-generator-functions",
  ];

  return {
    presets,
    plugins,
  };
};

2. update jest.config.ts like this.

import type {Config} from '@jest/types'

export default <Config.InitialOptions> {
  preset: 'jest-preset-angular',
      setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'], transform: {
        '^.+\\.(ts|html)$': 'jest-preset-angular',
        '^.+\\.js$': 'babel-jest',
      },
}

And it reports

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

When try to parse app.component.html.
Do I miss some steps?

[ahnpnl]

Hi I think the doc is outdated, you can check the proper configuration here https://github.com/thymikee/jest-preset-angular/tree/main/e2e/babel-support

[JiaLiPassion]

Yeah, I also tried that one, the same error occurs. it seems the e2e is not testing an angular app.

[ahnpnl]

I quickly made an example here #2036 If you are using preset in Jest config while specifying config for transform, the preset needs to be removed otherwise Jest will merge preset and transform which creates duplicated transform config or the config from preset will override transform. This leads tobabelConfig: true is not picked up.

[JiaLiPassion]

Thanks, this one works!