vuex $store is not defined on cypress component testing

Question

Currently I am trying to do component testing with vue and using vuex as state management

and when run test case on mount the component I got the error stating cannot read properties of undefined like in the screenshot.

It seems that cypress is not aware of $store that I used in vue component so do you know how I can fix that or is there anything I have to include in the configuration?

code snippet screenshot

code snippet:

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

cypress error screenshot

I tried to avoid using $store and switched to use mapState but still doesn't work

Answer 1

The docs say you need to enhance the cy.mount() command to include Vuex store.

In general, any plugins used in the app's startup code should be replicated in the test's 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)
})