Vitest spyOn has different behaviour than jest's

[galkatz373]

Describe the bug

Hey!
It seems the vitest spyOn doesn't have the same behaviour as the jest's (see reproduction)

Reproduction

vitest project reproduction: https://stackblitz.com/edit/vitest-dev-vitest-ne8pti?file=src%2Fexample.ts,test%2Fbasic.test.ts,package.json&initialPath=__vitest__

jest project reproduction: https://github.com/galkatz373/jest-example

System Info

macOS 12.0.1, node 16.6.0

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]

This is not about spyOn, but about how babel transforms typescript files.

Vite transforms files to something like this:

const func = () => {}
const combine = () => {
  func()
}
Object.definePropertry(__vite_exports__, 'func', {
  get: () => func
})
Object.definePropertry(__vite_exports__, 'combine', {
  get: () => combine
})

spyOn just spies on a call to __vite_exports__.func, but since func was called as a standalone function, we cannot spy on it.

I assume, babel saves pointers to functions somehow.

This is out of scope of Vitest. Maybe you can point to Vite repo for the solution. I will not close this issue for now, in case you have any questions.

[galkatz373]

Thanks for the quick response! what would you say the workaround? besides potentially changing vite itself

[sheremet-va]

If you store methods on an object or class, you can spy on them without problem:

// funcs.ts
class Helper {
  func() {}
  
  combine() {
    this.func()
  }
}

export const helper = new Helper()

// or

export const helper = {
  func: () => {},
  combine: () => {
    helper.func()
  }
}

// test.ts
import { helper } from './funcs'

vi.spyOn(helper, 'func').mockReturnOnce(100)

[gugadev]

@sheremet-va works as well without instances but class level? For example, Helper class is injected by DI inside a Component and I want to test the component by mocking the class methods. Does Vitest support something like vi.spyOn(Helper.prototype, "func").mockReturnOnce(100)? Thanks.

[sheremet-va]

@sheremet-va works as well without instances but class level? For example, Helper class is injected by DI inside a Component and I want to test the component by mocking the class methods. Does Vitest support something like vi.spyOn(Helper.prototype, "func").mockReturnOnce(100)? Thanks.

Yes, it works.

[unicornware]

@sheremet-va works as well without instances but class level? For example, Helper class is injected by DI inside a Component and I want to test the component by mocking the class methods. Does Vitest support something like vi.spyOn(Helper.prototype, "func").mockReturnOnce(100)? Thanks.

Yes, it works.

@sheremet-va

are there any docs or examples regarding class level spies? i've scoured the docs site, but didn't see any references. not sure if i'm just overlooking them, however.

i'm finding that call counts are not recorded with a class level spy. my goal is to ensure the method updateRepository has been called once (toHaveBeenCalledOnce). i've tried the following patterns:

• vi.spyOn(Manager.prototype, 'updateRepository')
• vi.spyOn(Manager.default.prototype, 'updateRepository') (the Manager class is default exported)
• mocking Manager, then using vi.mock('#src/models/manager') instead of vi.spyOn

none of the patterns above got my test working. any thoughts? (no bug btw, i'm just doing something wrong and looking for a working example haha 😅)