Mocking and Spying on Local Storage in Vitest

One of the challenges we often face is dealing with browser APIs like Local Storage, which can make our tests more complex and harder to maintain. Fortunately, Vitest, a popular testing framework for Vue.js, provides us with a powerful tool to mock and spy on Local Storage, making our tests more reliable and easier to write.

I'll walk you through the process of mocking and spying on Local Storage in Vitest. By the end of this post, you'll have a solid understanding of how to test your Vue.js components that interact with Local Storage, ensuring that your code works as expected and making it easier to refactor or add new features in the future.

First, we need to define a constant that represents the key we'll be using to store data in Local Storage. In this example, we'll use the key 'WatchList':

const LOCAL_STORAGE_KEY = 'WatchList'

Next, we'll create two spies using Vitest's vi.spyOn function. These spies will monitor the getItem and setItem methods of the Storage prototype, allowing us to track when and how these methods are called:

const getItemSpy = vi.spyOn(Storage.prototype, 'getItem')
const setItemSpy = vi.spyOn(Storage.prototype, 'setItem')

To ensure that our tests start with a clean slate, we'll use the afterEach hook to clear Local Storage and reset our spies after each test case:

afterEach(() => {
  localStorage.clear()
  getItemSpy.mockClear()
  setItemSpy.mockClear()
})

Now, let's write some tests! Suppose we have a component that adds items to a watch list stored in Local Storage. We can test this functionality by mocking the setItem method and asserting that it was called with the correct key and value:

expect(setItemSpy).toHaveBeenCalledWith(LOCAL_STORAGE_KEY, JSON.stringify([1]))
expect(setItemSpy).toHaveBeenCalledWith(LOCAL_STORAGE_KEY, JSON.stringify([2]))

In this example, we're expecting the setItem method to be called twice, once with the value [1] and once with the value [2].

We can also test the retrieval of data from Local Storage by mocking the getItem method and asserting that it was called with the correct key:

getItemSpy.mockReturnValueOnce(JSON.stringify([1, 2]))
expect(getItemSpy).toHaveBeenCalledWith(LOCAL_STORAGE_KEY)
expect(setItemSpy).toHaveBeenCalledWith(LOCAL_STORAGE_KEY, JSON.stringify([1]))

Here, we're mocking the getItem method to return the value [1, 2], and then asserting that the getItem method was called with the correct key (LOCAL_STORAGE_KEY). Additionally, we're asserting that the setItem method was called with the key LOCAL_STORAGE_KEY and the value [1], which could be a subsequent operation performed by our component based on the retrieved data.

By following this approach, you can write comprehensive tests for your Vue.js components that interact with Local Storage, ensuring that they work as expected and making it easier to refactor or add new features in the future.