Vue + Jest + Typescript Unexpected reserved word 'let' and Jest encountered an unexpected token

[Maniumn]

I get different errors by unit test for working code. With babel installed "Unexpected reserved word 'let'" and without babel installed "Jest encountered an unexpected token". What do I do wrong?

Version

1.0.0-beta.29

Reproduction links

https://github.com/Maniumn/vue-typescript-babel-unit-test
https://github.com/Maniumn/vue-typescript-no-babel-unit-test

Steps to reproduce

git clone
npm i
npm run test:unit

What is expected?

Test passed

What is actually happening?

Errors: Unexpected reserved word 'let' and Jest encountered an unexpected token

[lmiller1990]

This works out of the box for me:

Oh, I see you are using class component... let me try that now.

[lmiller1990]

Ok, I got a similar error (but not about let) when using class component.

get setImages(): boolean {
    let x: number = 4
    let y = <number>x
    return true
  }

This seems to be the problem, specifically let y = <number>x. Try either:

• let y = 4
• let y: number = x
• let y = x as number

And it should be okay. It seemed to think < was the start of a JSX element. Here is the error I got:

 FAIL  tests/unit/example.spec.ts
  ● Test suite failed to run

    SyntaxError: /Users/lachlan/code/dump/testing-ts-utils/unknown: Expected corresponding JSX closing tag for <number> (11:8)

       9 |
      10 | }
    > 11 |         </>;
         |         ^
      12 |     }
      13 | };
      14 | tslib_1.__decorate([

I don't think it's a bug in vue-test-utils.

[lmiller1990]

Going to close this one for now - let me know if you disagree with this, @Maniumn . If it helps, there is a tslint rule to prevent using <type> to cast a type, and use the as type syntax instead.

[Maniumn]

This is not a solution. My example is a little code from big project. In my project there are everywhere problems with test, let, JSX, babel ... Something is complettly wrong with vue class based and tests with jest.

[lmiller1990]

@Maniumn , can you provide a repro demonstrating the problems with let? Your above reproduction does not use JSX, and the let problem was related to the < tag, used for typecasting.

I was able to get your reproduction running correctly by using the as String typecasting opposed to the <string> typecasting. You cannot use the <string> type with JSX - the parser does not know what to do when it encounters as < token.

If you have an alternative failing repro I can pull down, I'm happy to reopen this issue until we have a fix. "Something is completely wrong with class based tests with Jest" is not enough to allow me to troubleshoot your issue.

[vegerot]

This is a problem plaguing me as well

[vegerot]

@lmiller1990 I'm not using jsx anywhere in my project, and I don't want to. Whenever I run jest on code using <type> assertions I get

. I see that jsx is enabled by default. So when I change my babel config to say

, I now get


.

[vegerot]

My question: is there any way to use Vue without ANY jsx at all, in such a way that I can use <type> assertions? Or does vue-test-utils require jsx compatible code?

Thanks so much for your help

[lmiller1990]

You are using Vue 2 (not Vue 3 right) + Vue CLI?

The obvious work-around is just to use (window as any) instead of (<any>window). Disallowing <....> casts is pretty common among React projects for this same reason - it is difficult for the parse to know what to do.

[vegerot]

Yeah, that is the obvious workaround I'll do if this doesn't get answered. But I was wondering if I could totally disable React and jsx in the parser, so there is no ambiguity

[lmiller1990]

Most likely it is possible to disable JSX, you will need to play around with the Vue CLI config. This is not really a VTU specific problem but Jest + tooling. There is likely some magic configuration that will allow this to work but for now I would recommend just never using the <type> type-casting syntax.

If I have some time I might try figure this out but I cannot promise I can spend time on this with other issues taking priority. Let me know if you do get it working, though, I am sure someone wants this.

[vegerot]

Thank you. The easy solution is simply to enable eslint. I have went through everything I could to get rid of all jsx references to no avail. So I will use the eslint rule. :(

[gopalakrishnanr-paypaycorp]

You are using Vue 2 (not Vue 3 right) + Vue CLI?

The obvious work-around is just to use (window as any) instead of (<any>window). Disallowing <....> casts is pretty common among React projects for this same reason - it is difficult for the parse to know what to do.

Thanks @lmiller1990 its working.

In my case lookupContainer: HTMLElement = <HTMLElement >this.$refs.lookupResult;

Change to lookupContainer: HTMLElement = this.$refs.lookupResult as any;

[vegerot]

In my case lookupContainer: HTMLElement = <HTMLElement >this.$refs.lookupResult;

Change to lookupContainer: HTMLElement = this.$refs.lookupResult as any;

Why not just do

lookupContainer: HTMLElement = this.$refs.lookupResult as HTMLElement;

?