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' to babe.config.js, it works. Is this intended? Perhaps installing the TS support should also check for unit tests with jest, and update the transform` 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

[Maxim-Mazurok]

I was getting the following error:

ts-jest[versions] (WARN) Version 4.2.3 of typescript installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=2.7.0 <4.0.0). Please do not report issues in ts-jest if you are using unsupported versions.
 FAIL  tests/unit/example.spec.ts
  ● Test suite failed to run

    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:

    /home/maxim/WebWatcher/Frontend/node_modules/vue-tsx-support/lib/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from "./api";
                                                                                             ^^^^^^

    SyntaxError: Unexpected token 'export'

    > 1 | import * as tsx from "vue-tsx-support";
        | ^
      2 | import { PropType, VNode } from "vue";
      3 | 
      4 | export default tsx.component({

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (src/components/WWHeader.tsx:1:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.857s
Ran all test suites.

My babel:

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
};

My jest:

module.exports = {
  preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
  setupFiles: ["./tests/unit/setup.js"],
};

Adding transformIgnorePatterns: [], to jest config helped.

[lmiller1990]

Best open a new issue with a repoduction repo - it's likely a different issue, since this thread is around 3 yrs old @Maxim-Mazurok.

[Maxim-Mazurok]

Thanks for a motivating push, @lmiller1990 :)
Here it is: #6389