Vite Build fails because of test TypeScript error

[rrd108]

My build fails because of typescript errors in a test

describe('SearchDetailed inAccountNumberRange', () => {
  it('returns true as no accountStart', () => {
    let wrapper = shallowMount(SearchDetailed, { global: _global, props })
    expect(wrapper.vm.inAccountNumberRange('452')).toBe(true)
  })
})

The error message is error TS2339: Property 'inAccountNumberRange' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{ results: Item[]; }> & Omit<Readonly<{ results?: unknown; accountStart?: unknown; accountEnd?: unknown; } & { results: Item[]; } & { ...; }> & VNodeProps & AllowedComponentProps & ComponentCustomProps, "results">; ... 10 more ...; $watch(source: string | Fu...'.

inAccountNumberRange is a method in the SearchDetailed component

The test runs fine, only the build fails.

The test is in the same folder as the component

[cexbrayat]

Hi @rrd108

It's hard to say what's going on without at least the component code and which versions are you using.

Would you mind sharing a minimal reproduction with us? Ideally a GitHub repository with just the minimum required to reproduce your issue.

[rrd108]

@cexbrayat

Here is the repo: https://github.com/rrd108/vue-test-utils-1191

Outputs in my system.

Tests

    ~/public_html/spec-rep    main  npm run test                                                                  ✔ 

> [email protected] test
> jest src

 PASS  src/components/SearchDetailed.spec.ts
  SearchDetailed inAccountNumberRange
    ✓ returns true as no accountStart (12 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.987 s, estimated 1 s
Ran all test suites matching /src/i.

Build

    ~/public_html/spec-rep    main  npm run build                                                                 ✔ 

> [email protected] build
> vue-tsc --noEmit && vite build

src/components/SearchDetailed.spec.ts:9:23 - error TS2339: Property 'inAccountNumberRange' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<{ results?: unknown; accountStart?: unknown; } & { results: unknown[]; } & { accountStart?: string | undefined; }> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 10 more ...; $watch(source: string | Function, cb:...'.

9     expect(wrapper.vm.inAccountNumberRange('452')).toBe(true)
                        ~~~~~~~~~~~~~~~~~~~~


Found 1 error.

[cexbrayat]

Thanks, that's what I was suspecting: your component is using script setup so this TS error is sadly expected. See #972

We are doing some magic in VTU to make this test possible, but we are waiting for a fix in Vue itself to make this type-checking possible. In the meantime, you have to explicitly add a cast like (wrapper.vm) as unknown as { inAccountNumberRange: (n: string) => boolean }).

You can track #972 and vuejs/core#4465

Closing this one as duplicates.