Testing Local Storage with 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 provides us with powerful tools to mock and spy on Local Storage, making our tests more reliable and easier to write.

Setting Up the Test Environment

const LOCAL_STORAGE_KEY = 'WatchList'

First, we need to create spies for our localStorage methods:

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

Test Cleanup

To ensure test isolation, we'll clean up after each test:

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

Writing Test Cases

Testing Storage Operations

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 with different values.

Testing Data Retrieval

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 and verifying both the retrieval and subsequent storage operations.

Conclusion

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.