vue.js - 用 cypress 测试 vuex

Question

我在我的 Vue.js 项目 (Nuxt.js) 中使用了 Cypress。我无法解决的主要问题是如何了解 vuex 存储已准备就绪。假设我有一个按钮可以调用 axios 来获取一些数据。然后数据通过突变进入商店，Vue 将在模板中呈现它。在商店建成之前，我要与之交互的下一个元素是空的。但是柏树正试图检查它。

如何在商店建立后调用下一个柏树 Action (如 cy.get)？

我的项目比较复杂。但核心问题是，cypress 有时不会等待商店 build 并尝试进一步工作。我们第一次使用cy.wait(1000)，但似乎不是那么完美的决定。

<div>
    <button data-cy="fetchDataBtn" @click="fetchData">get items</button>
    <ul>
        <li v-for="item in items">
           <p>{{ item.title }}</p>
           <button
                @click="fetchProduct(item.id)"
            >
                buy {{ item.name }}
            </button>
        </li>
    </ul>
</div> 

    <script>
    import { mapState } from 'vuex';
    export default {
        name: 'App',
        computed: {
            ...mapState('list', ['items'])
        }
    } 
    </script>

我希望出现以下情况:

cy.get([‘data-cy=fetchDataBtn’]).click()
// wait for store is ready and list is already rendered 
// (NOT cy.wait('GET', 'url_string') or cy.wait(milliseconds))
cy.contains(‘button’, 'buyItemName').click()

Answer 1

看看这篇文章Testing ... with Vuex Store ... ，关键是给window添加对vue app的引用，

const app = new Vue({
  store,
  el: '.todoapp'
  //
})
if (window.Cypress) {
  // only available during E2E tests
  window.app = app
}

然后在继续测试 DOM 之前测试存储的适当键

const getStore = () => cy.window().its('app.$store')

it('has loading, newTodo and todos properties', () => {
  getStore().its('state').should('have.keys', ['loading', 'newTodo', 'todos'])
})

---

然而，它可以比这更简单!

你说

The next element I want to interact with is empty before the store has built.

通过正确的命令组合，Cypress 将等待通过 axios 获取的内容，只要您选择正确的 'indicator' 元素并测试它的内容，对于例子

cy.contains('my.next.element.i.want.to.interact.with', 'the.content.fetched.with.axios', { timeout: 10000 })

这最多等待 10 秒以显示获取的内容(如果出现得更早，则等待时间更短)。如果没有超时参数，它最多等待 5 秒，这可能就足够了。

注意，Cypress 链式命令有一个微妙的陷阱。

不要使用

cy.get('my.next.element.i.want.to.interact.with')
  .contains('the.content.fetched.with.axios')

因为你的 Vue 模板可能从一开始就有元素标签或类，但它的内容最初是空的，这种模式不会等待你想看到的内容。它会简单地比较初始内容(无)，而无需等待获取完成。