如何在cypress中设置本地存储

问题描述

我有一个简单的测试

describe('Page Test',() => {
  it('button has "contact-next-disabled" class',() => {
    cy.get('.contact-next-disabled')
  })
})

但是运行测试后，cypress显示错误

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

我的 getLocalStorage 函数与我正在测试的函数位于不同的文件中

export const getLocalStorage = () => {
  const contact = JSON.parse(window.localStorage.getItem('contact'))
  return contact
}

与我的 setLocalStorage 函数一起使用

export const setLocalStorage = (contact) => {
  const _contact = getLocalStorage()
  const updateContact = {
    ..._contact,...contact
  }
  window.localStorage.setItem('contact',JSON.stringify(updateContact))
}

如果我重写

if (!_contact.categories.length && !_contact.categoryNameEtc)

到

if (!_contact?.categories.length && !_contact?.categoryNameEtc)

错误消失了，但我只想在我的 cypress 测试中设置本地存储，而不是重写我的代码。我该怎么做？

解决方法

根据 here 的文档

Cypress 会在每次测试之前自动运行此命令，以防止在测试之间共享状态。除非您在单个测试中使用它来清除 localStorage，否则您不需要使用此命令。

您可以使用 cy.clearLocalStorage() 设置测试：

before(() => {
  // set localStorage
})

或者您可以使用 hooks 之类的插件在 Cypress 测试之间保留 localStorage。