Potential Bug: `vitest/prefer-describe-function-title` recommends using a Vue component as `describe` block name despite the result being not a useful string

[benedictleejh]

Reproduction: https://stackblitz.com/edit/vitejs-vite-9zbx3aik

When using vitest/prefer-describe-function-title for Vue component tests, it will recommend that describe blocks use the imported component directly as the name for the describe block. However, Vitest is unable to parse the component name from this, and the resulting string will be [object Object].

The failing test uses the component directly as the describe block name.

@hi-ogawa recommended reporting this issue here, though I personally consider it an issue in Vitest over an issue with the ESLint plugin, as having the describe block name automatically change to reflect changes to the component name to be very useful.

Vitest output:

 RUN  v3.2.4 /home/projects/vitejs-vite-9zbx3aik

 ❯ tests/components/HelloWorld.spec.ts (2 tests | 1 failed) 7ms
   ✓ HelloWorld > should not fail (lint errors) 1ms
   × [object Object] > should fail 5ms
     → expected 1 to be 2 // Object.is equality

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  tests/components/HelloWorld.spec.ts > [object Object] > should fail
AssertionError: expected 1 to be 2 // Object.is equality

- Expected
+ Received

- 2
+ 1

 ❯ eval tests/components/HelloWorld.spec.ts:13:15
     11| describe(HelloWorld, () => {
     12|   it('should fail', () => {
     13|     expect(1).toBe(2);
       |               ^
     14|   });
     15| });
 ❯ ../../../blitz.96435430.js:31:27890
 ❯ new Promise ../../../blitz.96435430.js:31:27849

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯


 Test Files  1 failed (1)
      Tests  1 failed | 1 passed (2)
   Start at  16:15:49
   Duration  2.05s (transform 80ms, setup 0ms, collect 194ms, tests 7ms, environment 0ms, prepare 359ms)

 ELIFECYCLE  Test failed. See above for more details.

ESLint output:

/home/projects/vitejs-vite-9zbx3aik/tests/components/HelloWorld.spec.ts
  5:10  error  Enforce using a function over an equivalent string  vitest/prefer-describe-function-title

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

[gtbuchanan]

Ha, I just ran into this around the same time as you. Here's my workaround:

import MyComponent from '@/components/MyComponent.vue';

export function raise(error: string | Error): never {
  throw typeof error === 'string' ? new Error(error) : error;
}

export function getVueComponentName(component: { name?: string; __name?: string }): string {
  return component.name ?? component.__name ?? raise('Expected component name');
}

const name = getVueComponentName(MyComponent);

describe(name, () => { ... });

Although, it requires allowArguments: true if you have vitest/valid-title enabled:

rules: {
  'vitest/valid-title': ['error', { allowArguments: true }],
}