어떻게 cypress에 nuxt 앱vuex점을 노출하기 위해?

어떻게 cypress에 nuxt 앱vuex점을 노출하기 위해?

나는 프로젝트 nuxt로 만들어진 노송 나무와 vuex점 검사를 만들고 싶다.문제는 그래서 나는 내가 그렇게(코드를 이 대답에서) 같은 테스트 중에서 행동하도록 관리할 수 있은 내가 방법 cypress 것을 폭로하기 전에 찾을 수 있다.

cy.visit()
cy.window().should('have.property', '__store__')
cy.window().then( win => {
  win.__store__.dispatch('myaction')
})

내 문제에 대한 답은 가장 가까운 이곳에서 발견될 수 있다.특히 그 Nuxt 문서를 nuxt는 있는 방법은refered 대답에 사용되 instatiating점의 클래식 모드로 사용되지 않았다는 것을 표시 하지만 이것은vue.js 앱 nuxt 없이 건설에 대해서만 타당한 대답인 것처럼 보인다.

어떤 도움이라도 감사하겠습니다.

당신은 nuxt에서 클라이언트 측 플러그를 통해:그것을 드러내야 한다.

// plugins/cypress.js

const isCypress = typeof window.Cypress !== 'undefined'

export default ({ store }) => {
  if (isCypress) {
    window.store = store
  }
}

그리고 노송 나무에서:테스트할 수 있습니다.

// cypress/integration/example.spec.js

describe('Store', () => {   
  it('Application store is exposed to cypress', () => {
    cy.visit('/')
    cy.window().should('have.property', 'store')
  })
})

스토어는 NuxtJS 도우미 $nuxt를 통해서도 이용할 수 있습니다.사이프러스에서 접속할 수 있습니다.window:

cy.window()
  .its('$nuxt')
  .then((nuxt) => {
    console.dir(nuxt.$store)
  })

당신은 플러그에 그럴 수 있습니다.예:는 창문에 저장하면 설정하는 것은 단지 플러그는 클라이언트를 작성.

plugins/exposestore.client.js

export default ({store}) => {
  window.__store__ = store
}

때문에 나는 사이프러스와 앱 사이에 경쟁 조건의 일종을 겪고 있저는 이것에 대한 몇일 동안 싸웠다.플러그 대신에, 나는 내가 탑재된 기능으로 브라우저를 확인이라고 덧붙였다.layout/default.ts파일:

mounted() {
        if (window.frameElement !== null && window.frameElement.id.includes('Your App')) {
            window.store = this.$store;
        }
    },

이 경우 Cypress 창과 Cypress 앱 창이라는 두 개의 창이 있는지 확인할 때도 유의하십시오.

언급URL : https://stackoverflow.com/questions/55516880/how-to-expose-vuex-store-of-nuxt-app-to-cypress