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)
10 | }
> 11 | </>;
| ^
12 | }
13 | };
14 | tslib_1.__decorate([
I don't think it's a bug in vue-test-utils.
@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.
@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
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
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.
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;
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;