在嘗試模擬 localStorage 時，如何處理來自 Test in react 的 JSON.parse 錯誤？

Question

這是我得到的錯誤。

 FAIL  src/tests/Game.test.js
   Game Component
    × Renders game part of the component when lastPlayed is null (157 ms)                                  
                                                                                                           
  ● Game Component › Renders game part of the component when lastPlayed is null             
                                                                                                           
    SyntaxError: Unexpected token u in JSON at position 0                                                  
        at JSON.parse (<anonymous>)                                                                        
                                                                                                           
      19 |   function getTimeDiff() {                                                                      
      20 |     let currentDay = new Date().toISOString();
    > 21 |     let prevPlay = JSON.parse(localStorage.getItem("lastplayed"));
         |                         ^
      22 |     let diff = differenceInHours(parseISO(currentDay), parseISO(prevPlay));
      23 |     console.log(currentDay + " and " + prevPlay);
      24 |

      at getTimeDiff (src/Game.js:21:25)

但是，從技術上講，如果模擬工作正常，並且 lastplayed 設置為 null，則 function getTimeDiff() 甚至不應該被調用

這是 Game 組件中的條件：

return(
<div>
{localStorage.getItem("lastplayed") === null || getTimeDiff() >= 24 ? (<SubComponent/>):(<AnotherComponent/>) }
</div>
)

這是我的測試文件，我從這里得到了 mockStorage 代碼

let mockStorage = {};

beforeAll(() => {
  global.Storage.prototype.setItem = jest.fn((key, value) => {
    mockStorage[key] = value;
  });
  global.Storage.prototype.getItem = jest.fn((key) => mockStorage[key]);
});

beforeEach(() => {
  mockStorage = {};
});

afterAll(() => {
  global.Storage.prototype.setItem.mockReset();
  global.Storage.prototype.getItem.mockReset();
});

afterEach(cleanup);

describe("Game Component", () => {
  it("Renders game part of the component when lastPlayed is null", () => {
    localStorage.setItem("lastPlayed", null);
    render(<Game />);
    expect(screen.getByTestId("title-header")).toBeInTheDocument();
    expect(screen.getByTestId("game-status-div")).toBeInTheDocument();
    expect(screen.queryByText("That's it for today")).not.toBeInTheDocument();
    expect(global.Storage.prototype.setItem).toHaveBeenCalledOnce();
    expect(mockStorage["lastPlayed"]).toEqual(null);
  });
});

Answer 1

getItem的實現需要更新以與標准實現相同。 所以而不是：

global.Storage.prototype.getItem = jest.fn((key) => mockStorage[key]);

它應該是類似的東西

global.Storage.prototype.getItem = jest.fn((key) => mockStorage[key] ?? null);

因此，如果鍵不存在，則返回null而不是undefined 。