Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jest 29 async await transform #2010

Open
1 task done
JiaLiPassion opened this issue Mar 19, 2023 · 9 comments
Open
1 task done

Jest 29 async await transform #2010

JiaLiPassion opened this issue Mar 19, 2023 · 9 comments
Labels

Comments

@JiaLiPassion
Copy link
Contributor

JiaLiPassion commented Mar 19, 2023

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
Copy link
Collaborator

ahnpnl commented Mar 19, 2023

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
Copy link
Contributor Author

@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
Copy link
Collaborator

ahnpnl commented Mar 20, 2023

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

@JiaLiPassion
Copy link
Contributor Author

@ahnpnl , Got it, thank you.

JiaLiPassion added a commit to JiaLiPassion/angular that referenced this issue Mar 25, 2023
Close angular#49110

From jest 29 and jest-preset-angular v13, the module transform logic
changed, and now jest-preset-angular use the use the tsconfig target
other than the hardcoded one, thymikee/jest-preset-angular#2010
But jest-angular-preset doesn't introduce the @babel/plugin-transform-async-to-generator
which is needed by angular since `async/await` still need to be transformed
to promise for ES2017+ target.
So for now, we disable to output the uncaught error console log for a temp solution,
until jest-preset-angular find a proper solution.
JiaLiPassion added a commit to JiaLiPassion/angular that referenced this issue Mar 25, 2023
Close angular#49110

From jest 29 and jest-preset-angular v13, the module transform logic
changed, and now jest-preset-angular use the use the tsconfig target
other than the hardcoded one, thymikee/jest-preset-angular#2010
But jest-angular-preset doesn't introduce the @babel/plugin-transform-async-to-generator
which is needed by angular since `async/await` still need to be transformed
to promise for ES2017+ target.
So for now, we disable to output the uncaught error console log for a temp solution,
until jest-preset-angular find a proper solution.
@JiaLiPassion
Copy link
Contributor Author

@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,
  };
};

  1. 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?

atscott pushed a commit to angular/angular that referenced this issue Mar 27, 2023
Close #49110

From jest 29 and jest-preset-angular v13, the module transform logic
changed, and now jest-preset-angular use the use the tsconfig target
other than the hardcoded one, thymikee/jest-preset-angular#2010
But jest-angular-preset doesn't introduce the @babel/plugin-transform-async-to-generator
which is needed by angular since `async/await` still need to be transformed
to promise for ES2017+ target.
So for now, we disable to output the uncaught error console log for a temp solution,
until jest-preset-angular find a proper solution.

PR Close #49325
@ahnpnl
Copy link
Collaborator

ahnpnl commented Mar 28, 2023

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
Copy link
Contributor Author

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

@ahnpnl
Copy link
Collaborator

ahnpnl commented Mar 28, 2023

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
Copy link
Contributor Author

Thanks, this one works!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants