Spread syntax on iterables unsupported within <script lang="ts"> blocks in Vue files when running tests

[jessevanassen]

Using the spread syntax to convert a non-array iterable (like a Map or Set) 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:

<script lang="ts">
import { defineComponent, h } from 'vue';

export default defineComponent({
    setup: () => ({
        values: [...new Set([1, 2, 3])],
    }),
    render: () => h('div'),
})
</script>

/test/unit/example.spec.ts:

import { mount } from '@vue/test-utils';
import Example from '../../src/example.vue';

test('Using a spread iterable from a Vue file', () => {
    const { vm } = mount(Example);
    expect(vm.values).toEqual([1, 2, 3]);
});

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 Githubissues.

Githubissues is a development platform for aggregating issues.