Describe the role of a spy in testing with a framework example

What's really being asked

This question probes your understanding of observation versus substitution in unit testing. The interviewer wants to see that you know a spy is a wrapper that intercepts calls to a real function so you can inspect invocations without stopping that function from doing its real work. At the senior level they also care whether you can apply this inside a component framework and manage test isolation.

The full answer

First, define the conceptual difference between a spy and a mock or stub. A spy records call count, arguments, and return values while leaving the original implementation intact, whereas a mock replaces behavior. Second, pick a specific framework context. In Vue you might spy on a methods object function or a composable utility. In Angular you might spy on a component class method or a service method invoked by a template event. In Svelte you might spy on a function imported into a component. Third, name the Jest API correctly. jest.spyOn takes an object and a method name, returns a mock function that still executes the original code, and exposes mock.calls and mock.results for assertions. Fourth, mention cleanup. Spies persist on the object between tests unless you call mockRestore or configure restoreMocks in Jest.

The mistakes people make

A major red flag is saying a spy replaces the original function. That describes a stub or mock, not a spy. Another red flag is providing an example where the original implementation must not run, such as suppressing a network request, and still calling it a spy. That is a misuse of terminology. Candidates also stumble by forgetting to restore the spy, which mutates shared module state and causes order-dependent test failures. Finally, giving a trivial example outside a component framework misses the point of the prompt.

What usually comes next

The interviewer may ask when you would choose spyOn over jest.fn or manual mocks. They may ask how to spy on exported functions in ES modules, which requires mocking the module because jest.spyOn works on object methods. They may also ask how to assert that a spy was called with specific arguments, or how to change a spy into a stub mid-test using mockReturnValue.

A concrete example

Imagine a Vue component with a submitForm method that calls this.saveData and then emits a success event. You want to verify that submitForm calls saveData with the correct payload without disabling the real save logic. In your test, you write const saveSpy = jest.spyOn(wrapper.vm, saveData). Then you trigger the form submission, for example with wrapper.find(button).trigger(click). After that, you assert expect(saveSpy).toHaveBeenCalledTimes(1) and expect(saveSpy).toHaveBeenCalledWith({ name: Ada }). Because it is a spy, the real saveData still executes and the component state updates normally. At the end of the test you call saveSpy.mockRestore() to remove the wrapper and prevent leakage into the next test.