Properly mocking lodash function

[jritzi]

I'm trying to mock the Lodash function debounce (to simply return the passed function without debouncing it). My components use debounce and round from Lodash. My test setup is:

vi.mock("lodash", async (importOriginal) => {
  const actual = (await importOriginal()) as any;

  return {
    ...actual,
    debounce: (fn: unknown) => fn,
  };
});

When I run a test of the component that uses round, I get the following error (with the recommendation exactly matching the setup code I'm using):

Error: [vitest] No "round" export is defined on the "lodash" mock. Did you forget to return it from "vi.mock"?
If you need to partially mock a module, you can use "importOriginal" helper inside:

vi.mock("lodash", async (importOriginal) => {
  const actual = await importOriginal()
  return {
    ...actual,
    // your mocked methods
  }
})

I see Lodash uses a default export, so I also tried:

vi.mock("lodash", async (importOriginal) => {
  const actual = (await importOriginal()) as any;

  return {
    ...actual,
    default: { ...actual.default, debounce: (fn: unknown) => fn },
  };
});

That gives the same error. What is the right way to mock individual Lodash functions?

As a side question, when I set up the typing as recommended in the docs (await importOriginal<typeof import('lodash')>()), I get the error TS2551: Property default does not exist on type LoDashStatic. for ...actual.default. What's the right typing to use for a module with default export?

[hi-ogawa]

lodash is not so esm friendly, so if I remember correctly, NodeJS only allows default import import _ from "lodash" originally.
Probably Vitest does some wrapping to allow writing import { debounce } from "lodash", so the answer might be to mix the two:

vi.mock("lodash", async (importOriginal) => {
  const actual = (await importOriginal()) as any;

  return {
    ...actual.default,
    debounce: fn => fn,
    default: { ...actual.default, debounce: fn => fn },
  };
});

Can you setup a reproduction based on https://github.com/vitest-dev/vitest/tree/main/examples, so we can check what you're doing exactly?

[jritzi]

Thanks, I was importing as import { debounce } from "lodash" (under the impression that lodash supports ESM, not sure why that works), but it looks like it won't until version 5 and using lodash-es still the recommended way to do it.

Using import { debounce } from "lodash", I was able to get it working using:

vi.mock("lodash", async (importOriginal) => {
  const mod = await importOriginal<{ default: typeof import("lodash") }>();

  return {
    ...mod.default,
    debounce: (fn: unknown) => fn,
  };
});

Switching to import { debounce } from "lodash-es", I was able to get it working using:

vi.mock("lodash-es", async (importOriginal) => {
  const mod = await importOriginal<typeof import("lodash-es")>();

  return {
    ...mod,
    debounce: (fn: unknown) => fn,
  };
});