편백으로 vuex 테스트

편백으로 vuex 테스트

Vue.js 프로젝트(Nuxt.js)에서 Cypress를 사용하고 있습니다.관리할 수 없는 주요 문제는 vuex 스토어가 준비되었는지 확인하는 방법입니다.예를 들어 데이터를 가져오기 위해 Axios를 호출할 수 있는 버튼이 있다고 가정해 보겠습니다.그런 다음 데이터가 돌연변이에 의해 저장소로 들어오고 Vue는 이를 템플릿으로 렌더링합니다.스토어가 작성되기 전에 다음으로 조작할 요소가 비어 있습니다.하지만 편백나무가 그걸 확인하려고 해요.

스토어 구축 후 다음 편백 액션(cy.get 등)을 어떻게 호출합니까?

내 프로젝트는 더 복잡하다.하지만 핵심적인 문제는 편백나무가 때때로 가게를 짓기를 기다리지 않고 일을 더 하려고 한다는 것이다.처음으로 사용하였습니다.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()

Vuex Store를 사용한 이 테스트 후를 보십시오. 중요한 것은 Vue 앱에 대한 참조를 창에 추가하는 것입니다.

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'])
})

---

하지만, 그것은 그것보다 더 간단할 수 있다!

당신이 말하길

스토어가 작성되기 전에 다음으로 조작할 요소가 비어 있습니다.

올바른 명령어 조합을 사용하면 예를 들어 올바른 '인디케이터' 요소를 선택하고 내용을 테스트하는 한, Cypress는 Axios를 통해 가져온 콘텐츠를 기다립니다.

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 템플릿에는 처음부터 요소 태그 또는 클래스가 있을 수 있지만 처음에는 내용이 비어 있어 이 패턴은 원하는 콘텐츠를 기다리지 않습니다.페치가 완료될 때까지 기다리지 않고 초기 내용(아무것도 없음)만 비교합니다.

언급URL : https://stackoverflow.com/questions/54398547/testing-vuex-with-cypress