Use transpileModule for TS and transform for babel conditionally

[lmiller1990]

Seems to fix vuejs/vue-cli#5714. Tested locally with latest vue-cli with a TS + babel and no babel setup.

[ahnpnl]

If it is a combination of ts and Babel, I think you should do transform twice, once with typescript and once with Babel. Should it be like that ?

[lmiller1990]

Hm, I am not sure in this particular case it makes any difference. Not we are transforming the code generated by the @vue/sfc-compiler, not an actual human, so I am not sure we need to care about polyfills. I could be wrong.

[ahnpnl]

One of the differences between transforming with ts vs Babel is: ts doesn’t include polyfills while Babel does.

An example is: Array.prototype.flat which is available on node 11. When transforming ts to js, ts won’t polyfill it. If chaining Babel into the transform pipe, Babel will polyfill it.

[lmiller1990]

Hm, interesting. I am not sure we need the double transform here; this library (vue-jest) doesn't have support for running in a browser right now, so everyone is running in a node + jsdom environment. Unless you are on a fairly old node version, the code generated from @vue/compiler-sfc should work just fine without polyfills.

We could run it through babel to be sure, I guess - I wonder what kind of performance hit this would incur, though? For some very large test suites, this might not be ideal.

Current goal is just to get it all working with vue-cli so people can try out Vue 3 + Jest.

[ahnpnl]

I think it’s safe to have e2e test for different combinations

[lmiller1990]

Looks like our e2e tests are failing!

Edit: just snapshot, makes sense. I guess we need to have a typescript test project here: https://github.com/vuejs/vue-jest/tree/master/e2e/__projects__

[haoqunjiang]

Have you tried optional chaining syntax in the template with Vue CLI TS + Babel setup?

[haoqunjiang]

(with Node.js v12)

[lmiller1990]

I have not tried that, is there any specific thing I should be trying to chain? I have actually never used the optional chaining feature in Vue CLI, what chaining would you expect to potentially break things?

[haoqunjiang]

IIRC, in that setup, TS preserves the ?. syntax, and Babel will then transpile it. So skipping Babel transpilation may break it in older Node versions. (Node 14 supports this syntax natively so we need to test in Node 12)

[lmiller1990]

Oh I thought you were referring to how you can chain the webpack configuration in vue.config.js. I understand now. I will test that.

[lmiller1990]

@sodatea I tried both with the null operator and (somewhat surprisingly) it worked fine.

I tried:

• ts + babel
• ts only
• babel only

Here is the test I used:

<template>
  <div class="hello">
    <h1>{{ msg?.english }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: Object
  },
});
</script>

import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const english = 'new message'
    const wrapper = shallowMount(HelloWorld, {
      props: { msg: { english } }
    })
    expect(wrapper.text()).toMatch(english)
  })
})

I am surprised babel knew about the null operator.

Can you think of anything else I should test out?

[haoqunjiang]

Good to know that!
I think it's good to go now.