How to mock a module using Vitest?

Question

I'm using React with typescript and Vite, and I'm doing a test which I have a button that calls a function from another module.

ListItem.tsx file Example:

import downloadData from '../../../utils/convertDataToDownload';

const ListItem: React.FC = () => {
return (
    <Button
       data-testid="btn-download-excel"
       className="secondary icon-right"
       icon={<IconMaterial name="download" />}
       onClick={() => downloadData(list)}
    >
       Download
    </Button>
    )
}

convertDataToDownload.tsx file

import { excel } from 'react-export-table-to-excel';

const downloadData = (list: List[]) => { 
  downloadExcel({
    fileName: 'SheetFile',
    sheet: 'sheettab',
    tablePayload: {
      ['','',''],
      body: list,
    },
  });
};

export default downloadData ;

list.test.tsx file

import downloadData from '../../../utils/convertDataToDownload'; //here the import works, it's possible to see and use the function;
import { vi, it } from 'vitest';
import ListItem from '.';


const mock = vi.mock('../../../utils/convertDataToDownload', () => {
  return {
    handleDownload: vi.fn()
  }
})

describe('<ListItem />', () => {
  it('starts download data', () => {
    render(<ListItem />);


    console.log("msg1", mock, "imported", downloadData )
});
});   

I want to test that the button was clicked and the function executed, I think that I should mock this download data and check if the mock was click, but when I try to mock, it's always undefined. I even got a simpler code, just with one function and tried to mock this but it also didn't work.

Following my config files:

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    "baseUrl": "./",
    "paths": {
      "@utypes/*": ["src/types/*"],
      "@ucomponents/*": ["src/components/*"],
      "@uassets/*": ["src/assets/*"]
    },
  },
  "types": ["vite/client", "vitest/globals"],
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }],
  "typeRoots": ["./node_modules/@types", "./types"],
}

vite.config.ts

import react from '@vitejs/plugin-react-swc';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), svgr()],
  test: {
    globals: true,
    environment: 'jsdom',
    css: true,
    setupFiles: './src/setup-tests.ts',
    coverage: {
      provider: 'v8', // or 'istanbul'
      reporter: ['text', 'json', 'html'],
      reportsDirectory: './tests/unit/coverage',
    },
  },
  define: { APP_VERSION: JSON.stringify(process.env.npm_package_version) },
  resolve: {
    alias: {
      '@utypes': '/src/types',
      '@ucomponents': '/src/components',
      '@uassets': '/src/assets',
    },
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
  },
});

setup-tests.js

import '@testing-library/jest-dom';
import { vi } from 'vitest';

Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: vi.fn().mockImplementation((query) => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: vi.fn(), // deprecated
    removeListener: vi.fn(), // deprecated
    addEventListener: vi.fn(),
    removeEventListener: vi.fn(),
    dispatchEvent: vi.fn(),
  })),
});

// https://github.com/nickcolley/jest-axe/issues/147
// Error: Not implemented: "window.computedStyle(elt, pseudoElt)"
const { getComputedStyle } = window;
window.getComputedStyle = (elt) => getComputedStyle(elt);

Thanks in advance.