vuex $store 未在 cypress 组件测试中定义

Question

目前我正在尝试使用vue进行组件测试并使用vuex作为状态管理

当在安装组件上运行测试用例时，我收到错误消息，指出无法读取未定义的属性，如屏幕截图中所示。

似乎 cypress 不知道我在 vue 组件中使用的

$store

，所以你知道我如何解决这个问题吗？或者有什么我必须包含在配置中的吗？

代码片段：

<v-data-table
  :header-props="{
    'sort-icon': 'mdi-swap-vertical',
  }"
  checkbox-color="primary"
  class="text1--text"
  :headers="$store.state.split.isOn ? splitHeaders : headers"
  :items="items"
  item-key="global_id"
  v-model="selectedRows"
  show-select
  :page="meta.current_page"
  :server-items-length="meta.total"
  :options.sync="options"
   @click:row="editTier"
></v-data-table>

cypress/support/component.ts

import './commands'

import { mount } from 'cypress/vue2'

declare global {
  namespace Cypress {
    interface Chainable {
      mount: typeof mount
    }
  }
}

Cypress.Commands.add('mount', mount)

TierManagementDataTable.cy.ts

import TierManagementDataTable from './TierManagementDataTable.vue'

describe('<TierManagementDataTable />', () => {
  it('renders', () => {
    // see: https://on.cypress.io/mounting-vue
    cy.mount(TierManagementDataTable)
  })
})

我尝试避免使用

$store

并改用

mapState

，但仍然不起作用

Answer 1

docs 说您需要增强

cy.mount()

命令以包含 Vuex 存储。

一般来说，应用程序启动代码中使用的任何插件都应该复制到测试的

component.ts

中。

cypress/support/component.ts

import { mount } from 'cypress/vue2'
import Vuex from 'vuex'
import { getStore } from '../../src/plugins/store'

Cypress.Commands.add('mount', (component, options = {}) => {
  // Setup options object
  options.extensions = options.extensions || {}
  options.extensions.plugins = options.extensions.plugins || []

  // Use store passed in from options, or initialize a new one
  options.store = options.store || getStore()

  // Add Vuex plugin
  options.extensions.plugins.push(Vuex)

  return mount(component, options)
})