Issue with vi.spyOn while trying to mock classes

[darksinge]

Describe the bug

I'm getting weird behavior with vi.spyOn(...).mockImplementation[Once](...) when spying on a class. I created a minimal example which follows the example in the docs almost exactly.

Typescript is giving me an error on the following snippet of code:

import * as exports from '../src/foo'
vi.spyOn(exports, 'Foo').mockImplementation(() => {
                         ^ typescript: Property 'mockImplementation' does not exist on type 'never'. [2339]
  const Foo = vi.fn()
  Foo.prototype.hello = vi.fn(() => 'world!')
  return { Foo }
})

Vitest happily runs the test anyway and fails with the following error:

TypeError: mock.hello is not a function
 ❯ test/foo.test.ts:13:17
     11|
     12|     const mock = new exports.Foo()
     13|     expect(mock.hello('asdf')).toEqual('hello world!')
       |                 ^
     14|   })
     15| })

Not ruling out user error, but I'm fairly certain the test is set up correctly. I even tried a few variations of the mocked function. Typescript says vi.spyOn(...) is returning the never type, which I think indicates mockImplementation() shouldn't be callable and therefore shouldn't cause any side effects. However, the Foo class still seems to get modified with the removal of its hello() method. I can get around the problem by mocking the entire class, but the docs seem to indicate the repro should work.

Reproduction

https://stackblitz.com/edit/vitest-dev-vitest-avbfj9?file=test/foo.test.ts

System Info

System:
    OS: macOS 13.0.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 3.16 GB / 32.00 GB
    Shell: 3.5.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 16.17.1 - ~/.asdf/installs/nodejs/lts/bin/node
    Yarn: 2.4.3 - ~/.nvm/versions/node/v16.3.0/bin/yarn
    npm: 8.15.0 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 107.0.5304.110
    Firefox: 107.0
    Safari: 16.1
  npmPackages:
    vitest: ^0.25.2 => 0.25.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]

almost exactly

What do you mean by almost exactly? mockImplementation expects returned object to be the same shape as the one you are mocking.

I think you are mixing vi.spyOn and vi.mock. The first one spies on an object in runtime, the second one mocks the whole module, so when you import it it exports the object you defined. Maybe we are not clear enough in the documentation about it. But there is also API reference for spyOn.

You need to invoke new class:

vi.spyOn(foo, 'Foo').mockImplementation(() => {
  const Foo = function () {} // there is no reason to return nested mock
  Foo.prototype.hello = vi.fn(() => 'goodbye world');
  return new Foo();
});
// or just
vi.spyOn(foo, 'Foo').mockImplementation(() => {
  return { hello: vi.fn(() => 'goodbye world') }
});

"whatever suites you from first two examples" was referencing different approaches - with prototype or just an object with methods, not factories, and we need to make it more clear.

Typescript is giving me an error on the following snippet of code

This might be a bug, indeed.

[darksinge]

What do you mean by almost exactly?

Meaning I replaced import * as exports from 'some-path' by importing an actual class with import * as foo from '../src/foo', and replaced // whatever suites you from first two examples with code taken from the two examples, but using return { Foo } instead of return { SomeClass }.

And yes, I got mixed up by the "whatever suites you from first two examples" comment, which both use vi.mock. My example test passed after returning an object like shown in your example, so that part was user error. It didn't feel intuitive that mockImplementation should take a factory method, essentially mocking the behavior of the constructor, rather than mocking the class itself. I can see it now in the API reference, but the examples in the guide threw me off, so I'd agree that clearer documentation would be helpful.

That aside, I still see this error in my editor, even with passing tests:

typescript: Property 'mockImplementation' does not exist on type 'never'. [2339]

[samkevin1]

typescript: Property 'mockImplementation' does not exist on type 'never'. [2339]

Hey! I opened a PR for this typescript bug. Could you please check it @sheremet-va?