Migration to vue 3

package.json

@@ -49,7 +49,7 @@
     "@babel/plugin-proposal-decorators": "7.12.12",
     "@babel/plugin-proposal-export-namespace-from": "7.12.1",
     "@babel/preset-env": "7.12.11",
-    "@vue/test-utils": "1.0.3",
+    "@vue/test-utils": "2.0.0-beta.13",
     "babel-eslint": "10.1.0",
     "camelcase": "5.3.1",
     "conventional-changelog": "3.1.24",
@@ -64,10 +64,10 @@
     "rollup-plugin-filesize": "9.1.0",
     "rollup-plugin-node-resolve": "5.2.0",
     "rollup-plugin-terser": "7.0.2",
-    "vue": "2.6.11",
-    "vue-class-component": "7.2.5",
-    "vue-template-compiler": "2.6.11",
-    "vuex": "3.1.1"
+    "vue": "^3.0.4",
+    "vue-class-component": "^8.0.0-rc.1",
+    "vue-template-compiler": "^2.6.0-beta.3",
+    "vuex": "^4.0.0-rc.2"
   },
   "jest": {
     "roots": [

src/__tests__/Observe.spec.js

@@ -1,10 +1,7 @@
-import Vuex, { Store } from 'vuex';
-import { createLocalVue } from '@vue/test-utils';
+import { createStore } from 'vuex';
 import io from '../__mocks__/socket.io-client';
 import Observe from '../Observe';
 
-createLocalVue().use(Vuex);
-
 const vuexActionCbInterface = expect.objectContaining({
   commit: expect.any(Function),
   dispatch: expect.any(Function),
@@ -36,7 +33,7 @@ it('should register system event handlers', () => {
 
 it('should invoke mutation on store when system event is fired', () => {
   const fn = jest.fn();
-  const store = new Store({
+  const store = createStore({
     mutations: {
       SOCKET_CONNECT: fn,
     },
@@ -50,7 +47,7 @@ it('should invoke mutation on store when system event is fired', () => {
 
 it('should invoke mutation on store when system event is fired (with arguments)', () => {
   const fn = jest.fn();
-  const store = new Store({
+  const store = createStore({
     mutations: {
       SOCKET_CONNECT: fn,
     },
@@ -64,7 +61,7 @@ it('should invoke mutation on store when system event is fired (with arguments)'
 
 it('should invoke mutation on store when server event is fired', () => {
   const fn = jest.fn();
-  const store = new Store({
+  const store = createStore({
     mutations: {
       SOCKET_MESSAGE: fn,
     },
@@ -78,7 +75,7 @@ it('should invoke mutation on store when server event is fired', () => {
 
 it('should invoke mutation on store when server event is fired (with arguments)', () => {
   const fn = jest.fn();
-  const store = new Store({
+  const store = createStore({
     mutations: {
       SOCKET_MESSAGE: fn,
     },
@@ -93,7 +90,7 @@ it('should invoke mutation on store when server event is fired (with arguments)'
 
 it('should invoke action on store when system event is fired', () => {
   const fn = jest.fn();
-  const store = new Store({
+  const store = createStore({
     actions: {
       socket_connect: fn,
     },
@@ -105,13 +102,12 @@ it('should invoke action on store when system event is fired', () => {
   expect(fn).toHaveBeenLastCalledWith(
     vuexActionCbInterface,
     { isConnected: true },
-    undefined,
   );
 });
 
 it('should invoke action on store when system event is fired (with arguments)', () => {
   const fn = jest.fn();
-  const store = new Store({
+  const store = createStore({
     actions: {
       socket_connect: fn,
     },
@@ -123,13 +119,12 @@ it('should invoke action on store when system event is fired (with arguments)',
   expect(fn).toHaveBeenCalledWith(
     vuexActionCbInterface,
     { isConnected: true },
-    undefined,
   );
 });
 
 it('should invoke action on store when server event is fired', () => {
   const fn = jest.fn();
-  const store = new Store({
+  const store = createStore({
     actions: {
       socket_message: fn,
     },
@@ -141,13 +136,12 @@ it('should invoke action on store when server event is fired', () => {
   expect(fn).toHaveBeenCalledWith(
     vuexActionCbInterface,
     undefined,
-    undefined,
   );
 });
 
 it('should invoke action on store when server event is fired (with arguments)', () => {
   const fn = jest.fn();
-  const store = new Store({
+  const store = createStore({
     actions: {
       socket_message: fn,
     },
@@ -160,13 +154,12 @@ it('should invoke action on store when server event is fired (with arguments)',
   expect(fn).toHaveBeenLastCalledWith(
     vuexActionCbInterface,
     message,
-    undefined,
   );
 });
 
 it('should apply custom event to action transformer', () => {
   const fn = jest.fn();
-  const store = new Store({
+  const store = createStore({
     actions: {
       socket_MESSAGE: fn,
     },
@@ -182,13 +175,12 @@ it('should apply custom event to action transformer', () => {
   expect(fn).toHaveBeenLastCalledWith(
     vuexActionCbInterface,
     message,
-    undefined,
   );
 });
 
 it('should apply custom event to mutation transformer', () => {
   const fn = jest.fn();
-  const store = new Store({
+  const store = createStore({
     mutations: {
       'SOCKET_new message': fn,
     },
@@ -206,7 +198,7 @@ it('should apply custom event to mutation transformer', () => {
 
 it('should apply custom action prefix', () => {
   const fn = jest.fn();
-  const store = new Store({
+  const store = createStore({
     actions: {
       'socket|newMessage': fn,
     },
@@ -222,13 +214,12 @@ it('should apply custom action prefix', () => {
   expect(fn).toHaveBeenLastCalledWith(
     vuexActionCbInterface,
     message,
-    undefined,
   );
 });
 
 it('should apply custom mutation prefix', () => {
   const fn = jest.fn();
-  const store = new Store({
+  const store = createStore({
     mutations: {
       __TEST__MESSAGE: fn,
     },

src/__tests__/createMixin.spec.js

@@ -1,4 +1,4 @@
-import { createLocalVue, mount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import createMixin from '../createMixin';
 
 const setup = () => {
@@ -7,11 +7,9 @@ const setup = () => {
     removeListenersByLabel: jest.fn(),
     emit: jest.fn(),
   };
-  const Vue = createLocalVue();
-  Vue.mixin(createMixin(GlobalEmitter));
-  const preparedMount = (comp = {}, options = {}) => (
-    mount({ render: () => null, ...comp }, { localVue: Vue, ...options })
-  );
+  const preparedMount = (options = {}) => mount({ render: () => null, ...options }, {
+    global: { mixins: [createMixin(GlobalEmitter)] },
+  });
   return { preparedMount, GlobalEmitter };
 };
 
@@ -22,8 +20,8 @@ it('should be function', () => {
 it('should return object with vue component hooks', () => {
   expect(createMixin()).toMatchObject({
     created: expect.any(Function),
-    beforeDestroy: expect.any(Function),
-    destroyed: expect.any(Function),
+    beforeUnmount: expect.any(Function),
+    unmounted: expect.any(Function),
   });
 });
 
@@ -78,7 +76,7 @@ describe('mixin use on component', () => {
         connect,
       },
     });
-    wrapper.destroy();
+    wrapper.unmount();
     expect(GlobalEmitter.removeListenersByLabel).toHaveBeenCalledTimes(1);
   });
 
@@ -107,7 +105,7 @@ describe('mixin use on component', () => {
         connect,
       },
     });
-    wrapper.destroy();
+    wrapper.unmount();
     expect(wrapper.vm.$options.sockets).toMatchObject({
       connect,
     });
@@ -119,6 +117,7 @@ describe('dynamic listeners', () => {
     const { GlobalEmitter, preparedMount } = setup();
     const connect = jest.fn();
     const wrapper = preparedMount();
+
     wrapper.vm.$socket.$subscribe('connect', connect);
     expect(GlobalEmitter.addListener).toHaveBeenCalledTimes(1);
     expect(GlobalEmitter.addListener).toHaveBeenCalledWith(wrapper.vm, 'connect', connect);
@@ -147,7 +146,7 @@ describe('dynamic listeners', () => {
         this.$socket.$unsubscribe('connect');
       },
     });
-    wrapper.destroy();
+    wrapper.unmount();
     expect(wrapper.vm.$options.sockets).not.toHaveProperty('connect');
   });
 
@@ -161,7 +160,7 @@ describe('dynamic listeners', () => {
   it('removes $subscribe and $unsubscribe helpers from the instance after destroy', () => {
     const { preparedMount } = setup();
     const wrapper = preparedMount();
-    wrapper.destroy();
+    wrapper.unmount();
     expect(wrapper.vm.$socket.$unsubscribe).toBeUndefined();
     expect(wrapper.vm.$socket.$subscribe).toBeUndefined();
   });

src/__tests__/decorator.spec.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-empty-function,class-methods-use-this,getter-return,max-classes-per-file */
-import { createLocalVue } from '@vue/test-utils';
-import Component from 'vue-class-component';
+import { Vue } from 'vue-class-component';
+import { createApp } from 'vue';
 import Socket from '../decorator';
 
 describe('@Socket() decorator', () => {
@@ -9,40 +9,35 @@ describe('@Socket() decorator', () => {
   });
 
   it('uses method name as a listener name', () => {
-    const Vue = createLocalVue();
-
-    @Component()
     class App extends Vue {
       @Socket()
       tweet() {
       }
     }
+    const app = createApp(App, {});
+    const root = app.mount(document.createElement('div'));
 
-    expect(App.options.sockets).toMatchObject({
+    expect(root.$options.sockets).toMatchObject({
       tweet: expect.any(Function),
     });
   });
 
   it('uses given name as a listener name', () => {
-    const Vue = createLocalVue();
-
-    @Component()
     class App extends Vue {
       @Socket('tweet')
       onTweet() {
       }
     }
+    const app = createApp(App, {});
+    const root = app.mount(document.createElement('div'));
 
-    expect(App.options.sockets).toEqual({
+    expect(root.$options.sockets).toEqual({
       tweet: expect.any(Function),
     });
   });
 
   it('doesn\'t throw an error when decorator used on the computed property and no methods defined on component', () => {
-    const Vue = createLocalVue();
-
     expect(() => {
-      @Component()
       class App extends Vue { // eslint-disable-line no-unused-vars
         @Socket('tweet')
         get tweets() {
@@ -52,10 +47,7 @@ describe('@Socket() decorator', () => {
   });
 
   it('doesn\'t throw an error when decorator used on the computed property and some methods defined on component', () => {
-    const Vue = createLocalVue();
-
     expect(() => {
-      @Component()
       class App extends Vue { // eslint-disable-line no-unused-vars
         @Socket('tweet')
         get tweets() {
@@ -68,15 +60,15 @@ describe('@Socket() decorator', () => {
   });
 
   it('doesn\'t define sockets on component when decorator used on the computed property', () => {
-    const Vue = createLocalVue();
-
-    @Component()
     class App extends Vue {
       @Socket('tweet')
       get tweets() {
       }
     }
 
-    expect(App.options.sockets).toBeUndefined();
+    const app = createApp(App, {});
+    const root = app.mount(document.createElement('div'));
+
+    expect(root.$options.sockets).toBeUndefined();
   });
 });