Vue-cli: Unit Test plugin and TypeScript w/ TSX not working

[lmiller1990]

Version

3.2.1

Reproduction link

https://github.com/lmiller1990/vue-cl-tsx-bug/pull/new/master

Environment info

Mac OS

Steps to reproduce

Clone above and yarn test:unit, or if you want your own:

Scaffold app

Select unit tests, typescript and babel

Change HelloWorld.vue to HelloWorld.tsx and fill with the following:

export const MyComponent = {
  name: 'MyComponent',
  render() {
     return ( <div>asdf</div>)
  }
}

Update example.spec.ts to import { MyComponent } from '@/components/MyComponent and shallowMount(MyComponent)...

Run the tests with yarn test:unit. I get:

 Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/lachlanmiller/javascript/vue/tsx/src/components/HelloWorld.tsx:6
            return (<div>asdf</div>);
                    ^

    SyntaxError: Unexpected token <

      1 | import { shallowMount } from '@vue/test-utils'
    > 2 | import { MyComponent } from '@/components/HelloWorld.tsx'
        | ^
      3 |
      4 | describe('HelloWorld.vue', () => {
      5 |   it('renders props.msg when passed', () => {

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.<anonymous> (tests/unit/example.spec.ts:2:1)

What is expected?

Runs the test fine

What is actually happening?

Does not appear to transpile the JSX/TSX

---

Maybe some work involving babel can fix this? I think all the official tools should work together. Maybe babel can do it.

[lmiller1990]

Ok, so it seems if I use babel-jest instead of ts-jest in jest.config.js, and add '@babel/preset-typescript' tobabe.config.js, it works. Is this intended? Perhaps installing the TS support should also check for unit tests with jest, and update thetransform` appropriately.

What is the difference of using babel-jest and @babel/preset-typescript vs ts-jest?

[LinusBorg]

I would consider this a bug.

In our webpack config, we use ts-loader and babel-loader after it, which compiles the JSX (Typescript can't compile JSX into Vue render functions)

In jest, we can configure ts-jest to use Babel as well, but we haven't made this a default setting so far.

This can be fixed though.

For your project, have a look at the docs for ts-jest, there you find the option or set to make it use Babel (I'm on mobile right now so no code snippets)

[lmiller1990]

For now it seems using babel-jest instead of ts-jest and addding the appropriate babel preset works. I'm not sure how to get ts-jest to use babel yet, I'll try a bit more tonight. Thanks for the reply so far - I'd like to contribute to this, if/when we figure out the best approach to do so.

[LinusBorg]

https://kulshekhar.github.io/ts-jest/user/config/babelConfig