Question

我想为使用nuxt构建的项目使用cypress为vuex存储创建测试。问题是我找不到将商店暴露给赛普拉斯的方法，因此无法在这样的测试中调度操作（从this answer中获取的代码）：

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

可以找到最接近我的问题的答案here。但这似乎仅对不使用nuxt构建的vue.js应用程序是一个有效的答案，尤其是因为Nuxt文档指示nuxt具有deprecated what it calls the classic mode来实例化商店，这是引用的答案中使用的方法。

任何帮助将不胜感激。

Answer 1

也可以通过 NuxtJS 助手 $nuxt 访问该商店。您可以通过 window:

在 Cypress 中访问它

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

Answer 2

您可以在插件中完成。例如。创建一个仅客户端插件，将商店设置为窗口

plugins / exposestore.client.js

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

Answer 3

您应该通过客户端插件在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')
  })
})

Answer 4

我为此苦苦挣扎了几天，因为我在赛普拉斯和我的应用程序之间遇到某种竞争状况。我没有使用插件，而是将浏览器检查添加到了layout/default.ts文件的挂载函数中：

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

在这种情况下，请确认两个窗口：Cypress窗口和Cypress中的应用程序窗口。

如何将nuxt应用程序的vuex存储暴露给赛普拉斯？

4 个答案: