How do I deal with a JSON.parse error coming from a Test in react when trying to mock localStorage?

Question

This is the error I'm getting.

 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)

However, technically if the mock was working properly, and lastplayed was set to null, the function getTimeDiff() shouldn't even be called

This is the conditional within the Game component:

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

this is my test file, I got the mockStorage code from here


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);
  });
});

Unexpected token u in JSON at position 0 - most likely the thing that is being "parsed" is undefined .... that's where the u comes from - though ... localStorage.getItem never returns undefined ... so that's a mystery - unless that item in localStorage is the string "undefined" I guess — Jaromanda X
@JaromandaX What about global.Storage? It appears (from a brief glance through the linked code) it can return undefined quite readily. — Heretic Monkey
@HereticMonkey - hmm, but the code that throws specifically is using localStorage ... localStorage.getItem("lastplayed") - oh, right ... i see what you mean — Jaromanda X
@JaromandaX One wonders why mockStorage is there at all then... Oh, I see, localStorage calls window.Storage.prototype.getItem/setItem — Heretic Monkey

Heretic Monkey Heretic Monkey · Accepted Answer · 2022-07-29T00:00:39

The implementation of getItem needs to be updated to work the same as the standard implementation. So instead of:

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

It should be something along the lines of

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

So that if a key is not present, null is returned rather than undefined.

How do I deal with a JSON.parse error coming from a Test in react when trying to mock localStorage?

1 Answers