quasar-testing icon indicating copy to clipboard operation
quasar-testing copied to clipboard

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

Open bklik opened this issue 3 years ago • 0 comments
trafficstars

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>

bklik avatar Aug 10 '22 16:08 bklik