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

fix(cli-plugin-unit-jest): When using TS & Babel, make ts-jest use babelConfig #3107

Merged
merged 2 commits into from
Dec 29, 2018

Conversation

LinusBorg
Copy link
Member

tsconfig.json is set to preserve jsx:

"jsx": "preserve"

Because Typescript can't compile JSX into Vue-style render functions, only React-style.

But that means:

  • When using Typescript and Babel, Typescript will emit Javascript that still contains JSX. That's fine withbuild and serve if we also use babel to conmplie the JSX afterwards. But in Jest, we can only pick one transform, we can't chain them.
  • When Only using Typescript, we can't use JSX at all.

This PR is meant to fix the first issue: ts-jest should use babel to transform result for correct JSX transforms by setting its babelConfig option.

close #3100

Sidenote: The second issue still exists, and likely isn't resolable. We should probably document it, though, and also mention in the prompt messages.

global: !api.hasPlugin('babel') ? undefined : {
'ts-jest': {
// we need babel to transpile JSX
babelConfig: true
Copy link
Member

@lmiller1990 lmiller1990 Dec 10, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

According to ts-jest this option will:

ts-jest will try to find a .babelrc, .babelrc.js file or a babel section in the package.json ...

But vue-cli generates a babel.config.js, a relatively new way to configure babel.

ts-jest lets you specify the path like so:

  'ts-jest': {
    babelConfig: 'babel.config.js'
  }
}

Maybe that would work.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, but true actually worked like a charm in a vue-cli project I tried it with. So I don'T think we need to specifiy a path./filename

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

huh, awesome. I wonder why that worked. Good to hear!

@LinusBorg

This comment has been minimized.

When using Typescript and Babel, ts-jest should use babel to transform result for correct JSX transforms

close #3100
@LinusBorg
Copy link
Member Author

Tested locally, works fine.

Not sure I should add a test, the jest generator tests that currently exist don't cover much details either.

@sodatea ?

@LinusBorg LinusBorg changed the title [WIP] use ts-jest babelConfig fix(cli-plugin-unit-jest): When using TS & Babel, make ts-jest use babelConfig Dec 13, 2018
previous way could end up with ugly `global: undefined`
when not using babel
Copy link
Member

@haoqunjiang haoqunjiang left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I think we should add tests. Otherwise it would be hard to track down when a major version bump happens.

@haoqunjiang haoqunjiang merged commit c9aaa2f into dev Dec 29, 2018
@mortyccp
Copy link

I got warning message

● Validation Warning:

  Unknown option "global" with value {"ts-jest": {"babelConfig": true}} was found. Did you mean "globals"?
  This is probably a typing mistake. Fixing it will remove this message.

  Configuration Documentation:
  https://jestjs.io/docs/configuration.html

@haoqunjiang
Copy link
Member

haoqunjiang commented Dec 31, 2018

@mortyccp Ahhhhh you are right, thanks! We should definitely add a test for this.

@LinusBorg
Copy link
Member Author

Oh damn, I'm sorry for messing this up :/

@LinusBorg LinusBorg deleted the LinusBorg-patch-2 branch January 15, 2019 20:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Unit Test plugin and TypeScript w/ TSX not working
4 participants