fix(plugins): allow setting vuex/router and custom plugins (#200)

* Do not mount component again on rerender

* fix(plugins): allow setting custom plugin and vuex/router

* Simplify setting logic

Author: afontcu

package.json

@@ -49,8 +49,7 @@
   "dependencies": {
     "@babel/runtime": "^7.12.1",
     "@testing-library/dom": "^7.28.1",
-    "@vue/test-utils": "^2.0.0-beta.12",
-    "lodash.merge": "^4.6.2"
+    "@vue/test-utils": "^2.0.0-beta.12"
   },
   "devDependencies": {
     "@apollo/client": "3.3.6",
@@ -70,6 +69,7 @@
     "isomorphic-unfetch": "^3.1.0",
     "jest-serializer-vue": "^2.0.2",
     "kcd-scripts": "^7.5.1",
+    "lodash.merge": "^4.6.2",
     "msw": "^0.21.3",
     "typescript": "^4.1.2",
     "vee-validate": "^4.0.2",

src/__tests__/plugins.js

@@ -0,0 +1,49 @@
+import '@testing-library/jest-dom'
+import ElementPlus from 'element-plus'
+import userEvent from '@testing-library/user-event'
+import {defineComponent} from 'vue'
+import {render, screen, fireEvent, waitFor} from '..'
+import {store} from './components/Store/store'
+
+test('can set global options and custom options such as a store', async () => {
+  const ComponentWithStore = defineComponent({
+    template: `
+      <el-popover trigger="hover" content="this is content">
+        <template #reference>
+          <el-button @click="$store.dispatch('increment')">
+            Hover to activate
+          </el-button>
+        </template>
+      </el-popover>
+      <span data-testid="count-value">{{ $store.state.count }}</span>
+      <directive />
+    `,
+  })
+
+  const DirectiveStub = {
+    template: '<p>Search now</p>',
+  }
+
+  render(ComponentWithStore, {
+    store,
+    global: {
+      plugins: [ElementPlus],
+      stubs: {
+        Directive: DirectiveStub,
+      },
+    },
+  })
+
+  expect(screen.getByText('Search now')).toBeInTheDocument()
+
+  const button = screen.getByText('Hover to activate')
+  userEvent.hover(button)
+
+  await waitFor(() => expect(screen.getByText('this is content')).toBeVisible())
+
+  expect(screen.getByTestId('count-value')).toHaveTextContent('0')
+
+  await fireEvent.click(button)
+
+  expect(screen.getByTestId('count-value')).toHaveTextContent('1')
+})

src/index.js

@@ -1,6 +1,5 @@
 /* eslint-disable testing-library/no-wait-for-empty-callback */
 import {mount} from '@vue/test-utils'
-import merge from 'lodash.merge'
 
 import {
   getQueriesForElement,
@@ -25,7 +24,7 @@ function render(
   const baseElement = customBaseElement || customContainer || document.body
   const container = customContainer || baseElement.appendChild(div)
 
-  const plugins = []
+  const plugins = mountOptions.global?.plugins || []
 
   if (store) {
     const {createStore} = require('vuex')
@@ -41,14 +40,11 @@ function render(
     plugins.push(routerPlugin)
   }
 
-  const wrapper = mount(
-    Component,
-    merge({
-      attachTo: container,
-      global: {plugins},
-      ...mountOptions,
-    }),
-  )
+  const wrapper = mount(Component, {
+    ...mountOptions,
+    attachTo: container,
+    global: {...mountOptions.global, plugins},
+  })
 
   // this removes the additional "data-v-app" div node from VTU:
   // https://github.com/vuejs/vue-test-utils-next/blob/master/src/mount.ts#L196-L213