-
Notifications
You must be signed in to change notification settings - Fork 159
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Spread syntax on iterables unsupported within <script lang="ts"> blocks in Vue files when running tests #445
Comments
I encountered this issue recently, too. Basically, even if we fix this, there's no guarantee that the code in your test env. is actually the same as your production code - this is a good example, we know I wonder what the fix is. Ideally we should be requiring and using the user's I've basically moved away from Jest for my Vue tests for this reason - Jest has a pretty good DX, but the ideal of using a different, duplicate build config for my tests is too problematic and a deal breaker. On top of that and jsdom differences, I feel like I can't rely on my tests any more. What's the correct action here? Any suggestions? |
That is what I use as a workaround now. However, that has a few downsides:
|
I'd love to see this somehow fixed, I'm not entirely sure what we should do. IIRC (could be incorrect) if we do not downgrade to es5 during the transformation, we end up with conflicts because of how naive the code-gen part of this code base is (sometimes you end up with multiple An ideal solution would be a more intelligence compiler where we actually parse with something like babel before creating the final code, but it's a lot of work to revamp. If someone wants to take a stab at making Happy to entertain other suggestions/ideals, too. |
Using the spread syntax to convert a non-array iterable (like a
Map
orSet
) to an array doesn't work within a<script lang="ts">
block within a Vue file.Depending on the TypeScript version, it will either produce the "RangeError: Invalid array length" error in TypeScript <= 4.1 (which is the default for @vue/cli projects) or an empty array when using a more recent version.
Reproduction
I created an empty project with the @vue/cli, and enabled Vue 3, TypeScript and Jest support.
/src/example.vue:
/test/unit/example.spec.ts:
Running the test fails, either on a runtime error with an older TypeScript version, or on the assertion on newer TypeScript versions.
Full reproduction in reproduction.zip
The problem is caused by the TypeScript compiler running in ES5 mode for <script lang="ts"> blocks. This produces TypeScript code that is unaware of iterables and causes the seem behavior.
The same behavior can be reproduced in the TypeScript playground by targeting ES5.
Possible workaround
Next to targeting ES5 mode in lib/utils.js, also enable the downlevelIteration property, so iterables are properly spreadable:
However, that still leaves the underlying issue that
<script lang="ts">
blocks are compiled to ES5, which produces huge amounts of code for constructs like async / await, the above-mentioned spreads, etc. which shouldn't be needed when targeting modern node versions.The text was updated successfully, but these errors were encountered: