feat: support vue 3 and vuex 4 (#203)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Eduardo San Martin Morote <posva13@gmail.com>

.github/workflows/vue-2.yml

@@ -0,0 +1,17 @@
+on:
+  - pull_request
+  - push
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: yarn
+      - run: yarn install
+      - run: yarn add --dev vue@2 vuex@3 @vue/test-utils@1
+      - run: yarn test
+      - uses: codecov/codecov-action@v3

README.md

@@ -1,6 +1,6 @@
 # vuex-mock-store [![Build Status](https://badgen.net/circleci/github/posva/vuex-mock-store)](https://circleci.com/gh/posva/vuex-mock-store) [![npm package](https://badgen.net/npm/v/vuex-mock-store)](https://www.npmjs.com/package/vuex-mock-store) [![coverage](https://badgen.net/codecov/c/github/posva/vuex-mock-store)](https://codecov.io/github/posva/vuex-mock-store) [![thanks](https://img.shields.io/badge/thanks-%E2%99%A5-ff69b4.svg)](https://github.com/posva/thanks)
 
-> Simple and straightforward mock for Vuex v3.x Store
+> Simple and straightforward mock for Vuex v3.x and v4.x Store
 
 Automatically creates spies on `commit` and `dispatch` so you can focus on testing your component without executing your store code.
 
@@ -88,7 +88,8 @@ const store = new Store({
 })
 // add other mocks here so they are accessible in every component
 const mocks = {
-  $store: store,
+  global: { $store: store },
+  // for Vue 2.x: just { $store: store } without global
 }
 
 // reset spies, initial state and getters

package.json

@@ -35,15 +35,15 @@
   "devDependencies": {
     "@types/jest": "^29.5.1",
     "@types/lodash.clonedeep": "^4.5.7",
-    "@vue/test-utils": "^1.3.5",
+    "@vue/test-utils": "^2.3.2",
     "codecov": "^3.8.3",
     "eslint": "^8.40.0",
     "eslint-config-posva": "^4.0.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
-    "vue": "^2.7.14",
+    "vue": "^3.2.47",
     "vue-template-compiler": "^2.7.14",
-    "vuex": "^3.6.2"
+    "vuex": "^4.1.0"
   },
   "repository": {
     "type": "git",
@@ -64,7 +64,13 @@
       "<rootDir>/tests/.*.js",
       "<rootDir>/tests/*/*.js"
     ],
-    "testEnvironment": "jsdom"
+    "testEnvironment": "jsdom",
+    "testEnvironmentOptions": {
+      "customExportConditions": [
+        "node",
+        "node-addons"
+      ]
+    }
   },
   "homepage": "https://github.com/posva/vuex-mock-store#readme",
   "dependencies": {

tests/index.spec.js

@@ -2,7 +2,23 @@
 const { Store } = require('../src')
 const Helper = require('./Helper')
 const { mount } = require('@vue/test-utils')
-const { mapState } = require('vuex')
+const Vue = require('vue')
+const { mapState, useStore } = require('vuex')
+
+const isVue3 = Vue.version.startsWith('3.')
+const onlyVue3 = isVue3 ? it : it.skip
+
+/**
+ * @param {{ store: Store }} options
+ */
+function vue2CompatibleMocks ({ store }) {
+  const mocks = { $store: store }
+  if (!isVue3) {
+    return { mocks }
+  }
+
+  return { global: { mocks } }
+}
 
 describe('Store Mock', () => {
   it('work with no args', () => {
@@ -70,11 +86,10 @@ describe('Store Mock', () => {
         'module/nested/mmGetter': 3,
       },
     })
-    const mocks = { $store: store }
     /** @type {import('@vue/test-utils').Wrapper} */
     let wrapper
     beforeEach(() => {
-      wrapper = mount(Helper, { mocks })
+      wrapper = mount(Helper, vue2CompatibleMocks({ store }))
     })
 
     it('correctly maps state', () => {
@@ -120,12 +135,38 @@ describe('Store Mock', () => {
           render: () => null,
           computed: mapState('nonExistent', ['a']),
         },
-        { mocks },
+        vue2CompatibleMocks({ store }),
       )
       expect(() => {
         // eslint-disable-next-line no-unused-expressions
         wrapper.vm.a
       }).toThrow(/module "nonExistent" not defined in state/)
     })
   })
+
+  onlyVue3('supports composition API', () => {
+    const wrapper = mount(
+      {
+        setup () {
+          const store = useStore()
+          return {
+            composition: Vue.computed(() => store.state.composition),
+          }
+        },
+        render: () => null,
+      },
+      {
+        global: {
+          provide: {
+            store: new Store({
+              state: {
+                composition: 'api',
+              },
+            }),
+          },
+        },
+      },
+    )
+    expect(wrapper.vm.composition).toBe('api')
+  })
 })