如何保存本地存储柏树反应答案

【问题标题】：How to save local storage cypress react如何保存本地存储柏树反应
【发布时间】：2020-01-24 00:01:03
【问题描述】：

您好，抱歉我的英语不好。

我正在使用 cypress 在我的项目中进行测试。之后我发现了这个问题/问题

it("call login",() => ...)

cypress 清除我的本地存储删除我的身份验证，导致下一个请求返回我的身份验证，因为它在本地存储中被删除

调用上述登录后如何保存本地存储？

【问题讨论】：

标签： reactjs testing cypress

【解决方案1】：

您可以使用cypress-localstorage-commands 插件在测试之间保留localStorage。

您可以创建一个特定用户登录的命令：

import "cypress-localstorage-commands";

Cypress.Commands.add('loginAs', (UserEmail, UserPwd) => {
  cy.request({
    method: 'POST',
    url: "/login",
    body: {
      user: {
        email: UserEmail,
        password: UserPwd,
      }
    }
  })
    .its('body')
    .then((body) => {
      cy.setLocalStorage("accessToken", body.accessToken);
      cy.setLocalStorage("refreshToken", body.refreshToken);
    });
});

然后在所有测试之前使用该命令进行登录，并在测试之间使用cypress-localstorage-commands plugin 保留localStorage：

describe("When user is authenticated", () => {
  before(() => {
    cy.loginAs("foo@user.com", "foo-password");
  });

  beforeEach(() => {
    cy.restoreLocalStorage();
  });

  afterEach(() => {
    cy.saveLocalStorage();
  });

  it("should be logged in", () => ...);
});

【讨论】：

【解决方案2】：

这是赛普拉斯的一个“功能”，通过留下数据来帮助防止测试影响其他测试。我们的想法是让每个测试都在“新鲜”的环境中运行，没有其他任何残留物。

在您的 cypress 代码中，在任何 it() 块中，cookie 和本地存储项都被保留，因此一种方法基本上是将所有内容放在一个（可能很大）it() 块中。

另一种方法是将 localstorage 值复制到变量中，然后恢复每个 it() 块中的值。您也可以在beforeEach 部分执行此操作。

希望对你有帮助

【讨论】：

【解决方案3】：

你可以使用setItem方法

storage.setItem(keyName, keyValue);

Storage 接口的setItem() 方法在传递键名和值时，会将该键添加到给定的 Storage 对象中，或者如果该键的值已经存在，则更新该键的值。

onSave() => {
localStorage.setItem('data', JSON.stringify(state))
}

【讨论】：