[Bug] Unexpected return value when trying to get a value for the key 'key' in LocalStorage before definition

[nlicalzi]

Describe the bug Possibly introduced in: https://github.com/capricorn86/happy-dom/pull/1254/files

We noticed this when running a dependabot bump from version 13.6.2 to 14.3.1.

Calling window.localStorage.getItem('key'); results in unexpected behavior when a KV pair with that key has not yet been set: it returns Function: key instead of the expected string | null return value for the getItem function.

To Reproduce Steps to reproduce the behavior:

Normal behavior:

window.localStorage.setItem('key', 'value');
const item = window.localStorage.getItem('key');
console.log(item); // 'value'

Problematic behavior:

const item = window.localStorage.getItem('key');
console.log(item); // [Function: key]

Expected behavior See above 😄

Device:

• MacOS 14.3 (23D56)
• Node v18.19.1
• happy-dom 14.3.1

[capricorn86]

Thank you for reporting @nlicalzi! :slightly_smiling_face:

There is a fix in now: https://github.com/capricorn86/happy-dom/releases/tag/v14.3.3

[nlicalzi]

What a fast fix, thank you David!

[kolaente]

Unfortunately, it seems like this broke a test case like this (using vitest):

test('return a saved history', () => {
    const saved = [{id: 1}, {id: 2}]
    Storage.prototype.getItem = vi.fn(() => JSON.stringify(saved))

    const h = getHistory()
    expect(h).toStrictEqual(saved)
})

where getHistory looks like this:

export function getHistory(): ProjectHistory[] {
    const savedHistory = localStorage.getItem('projectHistory')
    if (savedHistory === null) {
        return []
    }

    return JSON.parse(savedHistory)
}

Not sure if I'm doing anything wrong here? It worked fine until happy-dom 14.3.3.

[capricorn86]

@kolaente Sorry to hear that it broke your test.

window.localStorage and window.sessionStorage are already instantiated and defined during this stage and to be able to work with functionality such as getting a property by key (e.g. window.localStorage['myKey']) the storage had to be changed to a Proxy.

Would changing your spy to this example solve your problem?

vi.spyOn(localStorage, 'setItem').mockImplementation(() => JSON.stringify(saved));

[kolaente]

@capricorn86 That works great. Thank you very much for the fast response!

[capricorn86]

@kolaente I managed to make spying on the Storage.prototype methods work as well now, if you rather want to go with that solution: https://github.com/capricorn86/happy-dom/releases/tag/v14.6.2