How to set local storage in cypress - reactjs

Question

I have a simple test
describe('Page Test', () => {
it('button has "contact-next-disabled" class', () => {
cy.get('.contact-next-disabled')
})
})
But after running the test, cypress shows an error
34 | useEffect(() => {
35 | const _contact = getLocalStorage()
> 36 | if (!_contact.categories.length && !_contact.categoryNameEtc) {
| ^
37 | PGToaster.showDanger('Please select a category.')
38 | router.push('/contact/a-type')
39 | }
My getLocalStorage function is in a separate file from the one I am testing
export const getLocalStorage = () => {
const contact = JSON.parse(window.localStorage.getItem('contact'))
return contact
}
Which works together with my setLocalStorage function
export const setLocalStorage = (contact) => {
const _contact = getLocalStorage()
const updateContact = {
..._contact,
...contact
}
window.localStorage.setItem('contact', JSON.stringify(updateContact))
}
If I rewrite
if (!_contact.categories.length && !_contact.categoryNameEtc)
to
if (!_contact?.categories.length && !_contact?.categoryNameEtc)
The error is gone, but I would like to just set local storage in my cypress test instead of rewriting my code. How can I do this?

Answer 1

According to the docs of cy.clearLocalStorage()
Cypress automatically runs this command before each test to prevent state from being shared across tests. You shouldn't need to use this command unless you're using it to clear localStorage inside a single test.
You can either set up your tests using hooks:
before(() => {
// set localStorage
})
or you can use a plugin like cypress-localstorage-commands to preserve localStorage between Cypress tests.