Jest 如何 mock localStorage

在撰寫測試經常會需要 mock window class 的操作，例如預期呼叫 alert 啦，呼叫 localstorage 等，那麼為何只是說要呼叫呢？
因為很多時候要測試的是有沒有預期的執行，而不是執行過後的結果是什麼，例如 alert 期望他被呼叫到，而結果是啥並不重要，這算是寫測試到現在的一些心得吧ＸＤ

那麼這次在 mock window 內的 localStorage 卡了一下，後來終於找到了方法讓測試 mock 成功。

範例

那麼這次要測試的情境是，我寫了一個 class 他會去呼叫 localStorage 的 removeItem 跟 clear 這兩個函式，他們只要被呼叫就好了，至於結果如何，瀏覽器早就幫我們測試好了。

describe('mock localStorage', () => {
  beforeEach(() => {
    const localStorageMock = {
      removeItem: jest.fn(),
      clear: jest.fn()
    }

    Object.defineProperty(window, 'localStorage', { value: localStorageMock })
  })

  afterEach(() => {
    jest.clearAllMocks()
  })
  
  it('should call localStorage clear', () => {
    // ...
    
    expect(localStorage.clear).toHaveBeenCalled()
  })
})

這邊使用了 Object.defineProperty 去複寫 window 內的 localStorage 變成我們自己 mock 的物件，變且已經寫好了 jest.fn() 所以當 localStorageMock.clear 被呼叫就會如我們測試的預期了。