Mock module does not work when imported in vue sfc files in typescript

Describe the bug

When importing the library plyr inside a Vue 3 SFC and mock it inside a test file, it will not be mocked. Instead the actual library is used inside the vue file.

Reproduction

Considering having a component as follows

<template>
  <div></div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Plyr from 'plyr';

export default defineComponent({
  name: 'TestComponent',
  setup() {
    console.log(Plyr);
    return {};
  },
});
</script>

within the test the plyr library is mocked:

import { mount } from '@vue/test-utils';
import { vi } from 'vitest';
import TestComponent from './TestComponent.vue';

const onFunction = vi.fn();

vi.mock('plyr', () => {
  const plyrLib = vi.fn(() => ({
    on: onFunction,
  }));

  return {
    default: plyrLib,
  };
});

describe('TestComponent', () => {
  it('should register events', () => {
    mount(TestComponent);
    expect(onFunction).toHaveBeenCalled();
  });
});

When running the test, the actual Plyr class will be logged instead of the mocked library.

System Info

System:
    OS: macOS 12.4
    CPU: (10) x64 Apple M1 Pro
    Memory: 176.62 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 14.15.4 - ~/.nvm/versions/node/v14.15.4/bin/node
    npm: 6.14.10 - ~/.nvm/versions/node/v14.15.4/bin/npm
  Browsers:
    Chrome: 102.0.5005.115
    Chrome Canary: 105.0.5118.3
    Firefox: 101.0
    Safari: 15.5
  npmPackages:
    @vitejs/plugin-legacy: ^1.8.1 => 1.8.2 
    @vitejs/plugin-vue: ^2.3.3 => 2.3.3 
    vite: ^2.9.12 => 2.9.12 
    vitest: ^0.14.2 => 0.14.2

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sheremet-va]

Yeah, the fix would only work if you were doing vi.mock inside a Vue file. You need to wait for https://github.com/vitejs/vite/issues/8659 to be fixed

[sheremet-va]

There is a bug/inconsistency in Vite (https://github.com/vitejs/vite/issues/8659), and because of that we resolved paths differently, when processing vi.mock and import.

This change should fix that on Vitest side: https://github.com/vitest-dev/vitest/pull/1506