From 40f3b369b47b30f55132355ced2a1c2b37fe0607 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= Date: Fri, 8 Jan 2021 11:11:50 +0100 Subject: [PATCH 1/3] Do not mount component again on rerender --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index fca58e3..dcf1dbc 100644 --- a/src/index.js +++ b/src/index.js @@ -25,7 +25,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') From 53e73ac90339a7207a34675ca7d14955799889c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= Date: Fri, 8 Jan 2021 11:28:03 +0100 Subject: [PATCH 2/3] fix(plugins): allow setting custom plugin and vuex/router --- src/__tests__/plugins.js | 39 +++++++++++++++++++++++++++++++++++++++ src/index.js | 14 +++++--------- 2 files changed, 44 insertions(+), 9 deletions(-) create mode 100644 src/__tests__/plugins.js diff --git a/src/__tests__/plugins.js b/src/__tests__/plugins.js new file mode 100644 index 0000000..10f7257 --- /dev/null +++ b/src/__tests__/plugins.js @@ -0,0 +1,39 @@ +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('setting a plugin + a custom option such as store sets both plugins', async () => { + const ComponentWithStore = defineComponent({ + template: ` + + + + {{ $store.state.count }} + `, + }) + + render(ComponentWithStore, { + store, + global: { + plugins: [ElementPlus], + }, + }) + + 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') +}) diff --git a/src/index.js b/src/index.js index dcf1dbc..b23e7ee 100644 --- a/src/index.js +++ b/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, @@ -41,14 +40,11 @@ function render( plugins.push(routerPlugin) } - const wrapper = mount( - Component, - merge({ - attachTo: container, - global: {plugins}, - ...mountOptions, - }), - ) + const wrapper = mount(Component, { + attachTo: container, + global: {plugins}, + ...mountOptions, + }) // 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 From 80d574c7d35ca8ed7b4c9263e3662fdbf4604cea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= Date: Fri, 8 Jan 2021 15:46:50 +0100 Subject: [PATCH 3/3] Simplify setting logic --- package.json | 4 ++-- src/__tests__/plugins.js | 12 +++++++++++- src/index.js | 4 ++-- 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 622a316..a7b92fe 100644 --- a/package.json +++ b/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", diff --git a/src/__tests__/plugins.js b/src/__tests__/plugins.js index 10f7257..def1b78 100644 --- a/src/__tests__/plugins.js +++ b/src/__tests__/plugins.js @@ -5,7 +5,7 @@ import {defineComponent} from 'vue' import {render, screen, fireEvent, waitFor} from '..' import {store} from './components/Store/store' -test('setting a plugin + a custom option such as store sets both plugins', async () => { +test('can set global options and custom options such as a store', async () => { const ComponentWithStore = defineComponent({ template: ` @@ -16,16 +16,26 @@ test('setting a plugin + a custom option such as store sets both plugins', async {{ $store.state.count }} + `, }) + const DirectiveStub = { + template: '

Search now

', + } + 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) diff --git a/src/index.js b/src/index.js index b23e7ee..fb96bfc 100644 --- a/src/index.js +++ b/src/index.js @@ -41,9 +41,9 @@ function render( } const wrapper = mount(Component, { - attachTo: container, - global: {plugins}, ...mountOptions, + attachTo: container, + global: {...mountOptions.global, plugins}, }) // this removes the additional "data-v-app" div node from VTU: