quasarframework / quasar-testing

Testing Harness App Extensions for the Quasar Framework 2.0+
https://testing.quasar.dev
MIT License
179 stars 65 forks source link

<script setup> causes 'quasar dev' to throw Property does not exist on type error on Jest tests #280

Closed bklik closed 11 months ago

bklik commented 2 years ago

Software version

OS: macOS 12.4 Node: 16.15.1 NPM: 8.11.0

Any other software related to your bug: @quasar/testing

What did you get as the error?

TS2339: Property 'testFunction' does not exist on type 'ComponentPublicInstance<{}, {}, {}, {}, {}, Record<string, any>, VNodeProps, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>'.

What were you expecting?

No error at all.

What steps did you take, to get the error?

Make a TestComponent.vue

<template>test</template>
<script lang='ts' setup>
    function testFunction() {
        console('testFunction');
    }
    defineExpose({testFunction});
</script>

Make a TestComponent.spec.ts

import { mount } from '@vue/test-utils';
import { describe, expect } from '@jest/globals';
import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-jest';

import TestComponent from './TestComponent.vue';

installQuasarPlugin()

describe('TestComponent', () => {
    const wrapper = mount(TestComponent);
    const { vm } = wrapper;

    it('has testFunction', () => {
        expect(typeof vm.testFunction).toBe('function');
    })
});

Run quasar dev

Quasar dev will throw the TS2339 error.

Note: you can run quasar test --unit jest just fine without error.

Work Around

If you write your TestComponent.vue like this, you will not get the error.

<template>test</template>
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    function testFunction() {
      console.log('testFunction');
    }

    return { testFunction };
  },
});
</script>
IlCallo commented 1 year ago

Hey there, quick question: how did you got import TestComponent from './TestComponent.vue'; correctly infer the component type?

script setup should be working with the soon-to-be-released beta, but I can't find a pretty guide to get rid of the Double File Component fashion we're been using up until now due to TS not being able to infer Vue files exported type

IlCallo commented 11 months ago

Closing due to lack of response