如何在 cypress 中设置本地存储答案

【问题标题】：How to set local storage in cypress如何在 cypress 中设置本地存储
【发布时间】：2021-06-28 00:57:42
【问题描述】：

我有一个简单的测试

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 测试中设置本地存储，而不是重写我的代码。我该怎么做？

【问题讨论】：

标签： reactjs unit-testing next.js cypress end-to-end

【解决方案1】：

根据cy.clearLocalStorage()的文档

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

您可以使用hooks 设置您的测试：

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

或者您可以使用像 cypress-localstorage-commands 这样的插件来保留赛普拉斯测试之间的 localStorage。

【讨论】：