Vue3 tests involving vuex with getters fail with error

[gmlewis]

Hi @Duncank - I bought your book and am trying to write my own tests in my own Vue3 app, but keep running into the same issue. A Google search isn't helping much. Do you have any ideas on how to fix this?

The error is:

$ yarn test:unit
yarn run v1.22.5
$ vue-cli-service test:unit
(node:4177) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
 FAIL  tests/unit/pages/Profile/Profile.spec.js
  ● renders stored display name

    [vuex] getters should be function but "getters.dashboardUrl" is "/user//dashboard".

      13 |   //   },
      14 |   // }
    > 15 |   return render(Profile, {
         |          ^
      16 |     // global: {
      17 |     //   provide: {
      18 |     //     languages: { 'en_us.UTF-8': {} },

      at assert (node_modules/vuex/dist/vuex.cjs.js:111:27)
      at node_modules/vuex/dist/vuex.cjs.js:325:7
      at node_modules/vuex/dist/vuex.cjs.js:99:52
          at Array.forEach (<anonymous>)
      at forEachValue (node_modules/vuex/dist/vuex.cjs.js:99:20)
      at node_modules/vuex/dist/vuex.cjs.js:324:5
          at Array.forEach (<anonymous>)
      at assertRawModule (node_modules/vuex/dist/vuex.cjs.js:319:28)
      at ModuleCollection.register (node_modules/vuex/dist/vuex.cjs.js:220:5)
      at new ModuleCollection (node_modules/vuex/dist/vuex.cjs.js:194:8)
      at new Store (node_modules/vuex/dist/vuex.cjs.js:364:19)
      at createStore (node_modules/vuex/dist/vuex.cjs.js:343:10)
      at render (node_modules/@testing-library/vue/dist/index.js:69:18)
      at renderProfile (tests/unit/pages/Profile/Profile.spec.js:15:10)
      at Object.<anonymous> (tests/unit/pages/Profile/Profile.spec.js:28:25)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 failed, 12 passed, 13 total
Snapshots:   0 total
Time:        2.062s, estimated 4s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Store looks like:

import { createStore } from 'vuex';

import { actions } from './actions.js'
import { getters } from './getters.js'
import { mutations } from './mutations.js'

const state = () => {
  const session = {}

  return {
    session,
  }
}

export const store = createStore({
  state,
  mutations,
  actions,
  getters,
})

And 'getters' looks like:

export const getters = {
  dashboardUrl(state) {
    return '/user//dashboard'
  }
}

My "package.json" looks like:

{
  "name": "exp01",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@material/checkbox": "^9.0.0",
    "@material/data-table": "^9.0.0",
    "core-js": "^3.6.5",
    "date-fns": "^2.16.1",
    "emitter-io": "^1.39.0",
    "jsrsasign": "^10.1.5",
    "node-notifier": "^8.0.1",
    "uuid": "^8.3.2",
    "vue": "^3.0.5",
    "vue-router": "^4.0.0-0",
    "vue3-editor": "^0.1.0-alpha.3",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@testing-library/vue": "^6.3.4",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.5",
    "@vue/test-utils": "^2.0.0-0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
    "vue-jest": "^5.0.0-0"
  }
}

[gmlewis]

I believe I found a workaround. It turns out that createStore in the unit test framework is being called on store which had already been created with createStore.

So I changed my store's definition to this:

// exported for testing purposes.
export const testStore = {
  state,
  mutations,
  actions,
  getters,
}

export const store = createStore(testStore)

and in the unit tests I do this:

import { testStore as store } from '@/store'

and now things are working.