如何使cypress在清理localStorage之前等待vuex操作结束？

Question

我使用cypress测试使用vuejs /vuex/ graphql制作的应用。多亏了this great article，它才起作用。

一个测试从组件调度一个vuex操作。此操作向服务器发出多个请求。在每个请求中，都会将一个auth令牌从localStorage（如果存在）注入到headers。

问题：该操作的第一个请求可以正常工作，但后续请求不再在标头中包含auth令牌，并且失败。据我了解，赛普拉斯在清洁localStorage之前不会等待所有请求完成。

component

<template>
  <button @click="save">Save</button>
</template>

<script>
export default {
  methods: {
    save() {
      this.$store.dispatch('update')
    }
  }
}
</script>
商店

export const actions = {
  async update({ commit, dispatch }) {
    try {
      // the token is here
      console.log('a. token ->', localStorage.getItem('token'))

      // this works
      const res = await apiUpdate()

      // now the token is null, but why? Is it because of Cypress?
      console.log('b. token ->', localStorage.getItem('token'))

      commit('set', res)

      // this fails because the token is null in localStorage
      await apiAnotherUpdate()

    } catch (e) {
      //…
    }
  })
test

describe("My app", () => {
  beforeEach(function() {
    cy.visit("http://localhost:8080/");

    // log the user and sets the token
    cy.login();
  });

  it("test button", function() {
    cy.get("button").click();
    cy.get("#page").should("contain", "Updated content");
  });
});
使此测试正常工作的正确方法是什么？

谢谢

---

edit

我在测试结束时使用cy.wait(2000)找到了ugug

修复程序，但仍然可以使用更清洁的解决方案。

我使用赛普拉斯来测试使用vuejs / vuex / graphql制作的应用程序。感谢这篇出色的文章，它的工作原理。一个测试从组件调度vuex操作。此操作向...

Answer 1

使组件中的函数async求解。