Tag: spyOn vs fn

Hey there! If you find this story intriguing, feel free to like or share it with others who might enjoy a slice of creativity.

---

I am piecing together a torn photograph (these analogies are getting good eh xD). This isn’t just any photograph—it’s a snapshot of a street scene, full of characters and hidden stories. Each torn piece I hold in my hand represents a function in a JavaScript code, and I need to decide how best to mend them.

In my left hand, I have jest.fn(), a tool that allows me to recreate any missing piece of the photo from scratch. It’s like conjuring a new piece of the puzzle that perfectly fits into the scene. With jest.fn(), I can invent new details, simulate the actions and behavior of any fragment. It doesn’t concern itself with what the original looked like—it just fills in the gaps, allowing me to test different possibilities and outcomes in my picture.

In my right hand, I hold jest.spyOn(). This tool, in contrast, is more like a magnifying glass that lets me closely examine the existing pieces of the photograph. With it, I can scrutinize the nuances of the original photo, understanding how each piece interacts with its neighbors. jest.spyOn() allows me to observe the existing fragments in action, without altering their essence. It helps me ensure that each piece is performing its intended function within the larger composition.

As I work to reassemble the photograph, sometimes I need the creative freedom and new possibilities that jest.fn() provides, letting me imagine what could be. Other times, I rely on the insightful observation of jest.spyOn() to ensure the integrity of the original scene is maintained.

---

jest.fn()

Think of jest.fn() as the tool that lets us create a mock function from scratch. It’s particularly useful when we want to test how a function behaves in isolation, without depending on its real implementation. For example:

const fetchData = jest.fn(() => Promise.resolve('data'));

test('fetchData returns data', async () => {
  const result = await fetchData();
  expect(result).toBe('data');
  expect(fetchData).toHaveBeenCalled();
});

In this code, jest.fn() allows us to create fetchData, a mock function that simulates an asynchronous operation. We use it to test that our function returns the expected data and behaves as intended, without needing the actual implementation details.

jest.spyOn()

On the other hand, jest.spyOn() is like our magnifying glass, letting us observe and verify the behavior of existing functions without altering them. This is especially useful when we need to monitor how a function is used within a module or class:

const myModule = {
  getData: () => 'real data',
};

test('getData is called', () => {
  const spy = jest.spyOn(myModule, 'getData');
  const data = myModule.getData();

  expect(spy).toHaveBeenCalled();
  expect(data).toBe('real data');

  spy.mockRestore();
});

Here, jest.spyOn() allows us to spy on getData method of myModule. We can verify that it was called and check its output while leaving the original implementation intact. After our test, we restore the method to its normal behavior with spy.mockRestore().

Key Takeaways

• jest.fn() is a powerful tool for creating mock functions. It’s perfect for simulating function behavior and testing how functions interact without relying on their actual implementations.
• jest.spyOn() allows us to observe and verify the behavior of existing functions, making it ideal for ensuring that functions are called as expected within their existing context.