From c0055d029c85129eedb9aff987a18eb3bfec7a0a Mon Sep 17 00:00:00 2001 From: Ojo Oluwasetemi Date: Sat, 10 Aug 2019 20:55:01 +0100 Subject: [PATCH 01/11] automatically clean up after with optout using VTL_SKIP_AUTO_CLEANUP --- src/vue-testing-library.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js index d47c6348..7207897e 100644 --- a/src/vue-testing-library.js +++ b/src/vue-testing-library.js @@ -160,5 +160,11 @@ fireEvent.update = (elem, value) => { return null } +if (typeof afterEach === 'function' && !process.env.VTL_SKIP_AUTO_CLEANUP) { + afterEach(() => { + cleanup() + }) +} + export * from '@testing-library/dom' export {cleanup, render, fireEvent} From 87a513da0fbf24504c462e95cc58ee8de4dec501 Mon Sep 17 00:00:00 2001 From: Ojo Oluwasetemi Date: Wed, 14 Aug 2019 04:18:42 +0100 Subject: [PATCH 02/11] add test to show auto cleanp and auto-cleanup-skip --- tests/__tests__/auto-cleanup-skip.js | 20 ++++++++++++++++++++ tests/__tests__/auto-cleanup.js | 26 ++++++++++++++++++++++++++ 2 files changed, 46 insertions(+) create mode 100644 tests/__tests__/auto-cleanup-skip.js create mode 100644 tests/__tests__/auto-cleanup.js diff --git a/tests/__tests__/auto-cleanup-skip.js b/tests/__tests__/auto-cleanup-skip.js new file mode 100644 index 00000000..cc7cf64d --- /dev/null +++ b/tests/__tests__/auto-cleanup-skip.js @@ -0,0 +1,20 @@ +import '@testing-library/jest-dom/extend-expect' + +let render +beforeAll(async () => { + process.env.VTL_SKIP_AUTO_CLEANUP = 'true' + const vtl = await import('@testing-library/vue') + render = vtl.render +}) + +// This one verifies that if VTL_SKIP_AUTO_CLEANUP is set +// then we DON'T auto-wire up the afterEach for folks +test('first test render a vue component', () => { + render({ + template: `

Hello World

` + }) +}) + +test('no cleanup should have happened, renders the first component still', () => { + expect(document.body.innerHTML).toEqual('

Hello World

') +}) diff --git a/tests/__tests__/auto-cleanup.js b/tests/__tests__/auto-cleanup.js new file mode 100644 index 00000000..fa963cdd --- /dev/null +++ b/tests/__tests__/auto-cleanup.js @@ -0,0 +1,26 @@ +import { render } from '@testing-library/vue' +import '@testing-library/jest-dom/extend-expect' + +const HelloWorldComponent = { + template: `

Hello World

` +} +// This just verifies that by importing VTL in an +// environment which supports afterEach (like jest) +// we'll get automatic cleanup between tests. +test('render the first component', () => { + const { container } = render(HelloWorldComponent) + + const h1 = container.querySelector('h1') + expect(h1.textContent).toEqual('Hello World') +}) + +const NewComponent = { + template: `

Automatic clean after each test

` +} + +test('it should cleanup after each test and render NewComponent', () => { + render(NewComponent) + expect(document.body.innerHTML).toEqual( + '

Automatic clean after each test

' + ) +}) From 7c66f41451490975717983f2f5c785ab55efeb95 Mon Sep 17 00:00:00 2001 From: Ojo Oluwasetemi Date: Wed, 14 Aug 2019 08:52:43 +0100 Subject: [PATCH 03/11] improve the test for simplicity --- tests/__tests__/auto-cleanup-skip.js | 2 -- tests/__tests__/auto-cleanup.js | 13 +++---------- 2 files changed, 3 insertions(+), 12 deletions(-) diff --git a/tests/__tests__/auto-cleanup-skip.js b/tests/__tests__/auto-cleanup-skip.js index cc7cf64d..32b5d218 100644 --- a/tests/__tests__/auto-cleanup-skip.js +++ b/tests/__tests__/auto-cleanup-skip.js @@ -1,5 +1,3 @@ -import '@testing-library/jest-dom/extend-expect' - let render beforeAll(async () => { process.env.VTL_SKIP_AUTO_CLEANUP = 'true' diff --git a/tests/__tests__/auto-cleanup.js b/tests/__tests__/auto-cleanup.js index fa963cdd..067dd8cb 100644 --- a/tests/__tests__/auto-cleanup.js +++ b/tests/__tests__/auto-cleanup.js @@ -11,16 +11,9 @@ test('render the first component', () => { const { container } = render(HelloWorldComponent) const h1 = container.querySelector('h1') - expect(h1.textContent).toEqual('Hello World') + expect(h1).toHaveTextContent('Hello World') }) -const NewComponent = { - template: `

Automatic clean after each test

` -} - -test('it should cleanup after each test and render NewComponent', () => { - render(NewComponent) - expect(document.body.innerHTML).toEqual( - '

Automatic clean after each test

' - ) +test('cleans up after each test by default', () => { + expect(document.body.innerHTML).toEqual('') }) From 5055a9c96c78cb175c111ccf00c3f34bccfa51c6 Mon Sep 17 00:00:00 2001 From: Ojo Oluwasetemi Date: Wed, 14 Aug 2019 10:14:26 +0100 Subject: [PATCH 04/11] add warning to cleanup-after-each --- cleanup-after-each.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/cleanup-after-each.js b/cleanup-after-each.js index 4da4319c..00a12665 100644 --- a/cleanup-after-each.js +++ b/cleanup-after-each.js @@ -1 +1,3 @@ -afterEach(require('./dist/vue-testing-library').cleanup) +console.warn( + 'The module `@testing-library/vue/cleanup-after-each` has been deprecated and no longer does anything (it is not needed). You no longer need to import this module and can safely remove any import or configuration which imports this module' +) From 24de758290cbca43ec42879e5ed1d864b9c3705f Mon Sep 17 00:00:00 2001 From: Ojo Oluwasetemi Date: Wed, 14 Aug 2019 10:16:12 +0100 Subject: [PATCH 05/11] remove cleanup references from all test --- src/__tests__/debug.js | 3 +-- src/__tests__/functional.js | 8 +++----- src/__tests__/simple-button.js | 4 +--- src/__tests__/stopwatch.js | 4 +--- src/__tests__/stubs.js | 4 +--- src/__tests__/vue-router.js | 4 +--- src/__tests__/vueI18n.js | 13 ++++++++----- src/__tests__/vuex.js | 4 +--- 8 files changed, 17 insertions(+), 27 deletions(-) diff --git a/src/__tests__/debug.js b/src/__tests__/debug.js index 4e26dc37..f3a33c56 100644 --- a/src/__tests__/debug.js +++ b/src/__tests__/debug.js @@ -1,4 +1,4 @@ -import {cleanup, render} from '@testing-library/vue' +import {render} from '@testing-library/vue' import HelloWorld from './components/HelloWorld' beforeEach(() => { @@ -6,7 +6,6 @@ beforeEach(() => { }) afterEach(() => { - cleanup() console.log.mockRestore() }) diff --git a/src/__tests__/functional.js b/src/__tests__/functional.js index 46d6c94f..033677b1 100644 --- a/src/__tests__/functional.js +++ b/src/__tests__/functional.js @@ -1,4 +1,4 @@ -import {cleanup, render} from '@testing-library/vue' +import {render} from '@testing-library/vue' import FunctionalSFC from './components/FunctionalSFC' const Functional = { @@ -8,15 +8,13 @@ const Functional = { }, } -afterEach(cleanup) - -it('renders functional comp', () => { +test('renders functional comp', () => { const {getByText} = render(Functional) getByText('Hi!') }) -it('renders functional SFC comp', () => { +test('renders functional SFC comp', () => { const {getByText} = render(FunctionalSFC) getByText('Hi!') diff --git a/src/__tests__/simple-button.js b/src/__tests__/simple-button.js index c6d63390..f02299b9 100644 --- a/src/__tests__/simple-button.js +++ b/src/__tests__/simple-button.js @@ -1,9 +1,7 @@ -import {render, cleanup, fireEvent} from '@testing-library/vue' +import {render, fireEvent} from '@testing-library/vue' import Button from './components/Button' import '@testing-library/jest-dom/extend-expect' -afterEach(cleanup) - test('renders button with text', () => { const text = "Click me; I'm sick" diff --git a/src/__tests__/stopwatch.js b/src/__tests__/stopwatch.js index 28487cee..3eba0c94 100644 --- a/src/__tests__/stopwatch.js +++ b/src/__tests__/stopwatch.js @@ -1,9 +1,7 @@ -import {cleanup, render, wait, fireEvent} from '@testing-library/vue' +import {render, wait, fireEvent} from '@testing-library/vue' import StopWatch from './components/StopWatch.vue' import '@testing-library/jest-dom/extend-expect' -afterEach(cleanup) - test('unmounts a component', async () => { jest.spyOn(console, 'error').mockImplementation(() => {}) diff --git a/src/__tests__/stubs.js b/src/__tests__/stubs.js index baef9b6a..4c220bb8 100644 --- a/src/__tests__/stubs.js +++ b/src/__tests__/stubs.js @@ -1,8 +1,6 @@ -import {render, cleanup} from '@testing-library/vue' +import { render } from '@testing-library/vue' import Stubs from './components/Stubs' -afterEach(cleanup) - test('Form contains search button', () => { const {getByText} = render(Stubs, { stubs: ['FontAwesomeIcon'], diff --git a/src/__tests__/vue-router.js b/src/__tests__/vue-router.js index 96666b07..d37050f5 100644 --- a/src/__tests__/vue-router.js +++ b/src/__tests__/vue-router.js @@ -1,6 +1,6 @@ import '@testing-library/jest-dom/extend-expect' +import {render, fireEvent} from '@testing-library/vue' -import {cleanup, render, fireEvent} from '@testing-library/vue' import App from './components/Router/App.vue' import Home from './components/Router/Home.vue' import About from './components/Router/About.vue' @@ -11,8 +11,6 @@ const routes = [ {path: '*', redirect: '/about'}, ] -afterEach(cleanup) - test('full app rendering/navigating', async () => { // Notice how we pass a `routes` object to our render function. const {queryByTestId} = render(App, {routes}) diff --git a/src/__tests__/vueI18n.js b/src/__tests__/vueI18n.js index 8d7fe894..4f569eb4 100644 --- a/src/__tests__/vueI18n.js +++ b/src/__tests__/vueI18n.js @@ -1,10 +1,8 @@ import '@testing-library/jest-dom/extend-expect' -import {cleanup, render, fireEvent} from '@testing-library/vue' +import { render, fireEvent } from '@testing-library/vue' import Vuei18n from 'vue-i18n' import VueI18n from './components/VueI18n' -afterEach(cleanup) - const messages = { en: { Hello: 'Hello', @@ -14,15 +12,20 @@ const messages = { }, } -test('can render en and ja text in header', async () => { +test('renders translations', async () => { const {queryByText, getByText} = render(VueI18n, {}, vue => { + + // Let's register Vuei18n normally vue.use(Vuei18n) + const i18n = new Vuei18n({ locale: 'en', fallbackLocale: 'en', messages, }) - //return i18n object so that it will be available as an additional option on the created vue instance + + // Notice how we return an object from the callback function. It will be + // available as an additional option on the created Vue instance. return {i18n} }) diff --git a/src/__tests__/vuex.js b/src/__tests__/vuex.js index e98e8c2a..c76b8d89 100644 --- a/src/__tests__/vuex.js +++ b/src/__tests__/vuex.js @@ -1,11 +1,9 @@ import '@testing-library/jest-dom/extend-expect' -import {cleanup, render, fireEvent} from '@testing-library/vue' +import { render, fireEvent } from '@testing-library/vue' import VuexTest from './components/Store/VuexTest' import {store} from './components/Store/store' -afterEach(cleanup) - // A common testing pattern is to create a custom renderer for a specific test // file. This way, common operations such as registering a Vuex store can be // abstracted out while avoiding sharing mutable state. From e1d3cb05b0e447e9654d81e8463426f155894090 Mon Sep 17 00:00:00 2001 From: Ojo Oluwasetemi Date: Wed, 14 Aug 2019 12:20:37 +0100 Subject: [PATCH 06/11] clean up the global component --- tests/__tests__/auto-cleanup.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/tests/__tests__/auto-cleanup.js b/tests/__tests__/auto-cleanup.js index 067dd8cb..91c5eb13 100644 --- a/tests/__tests__/auto-cleanup.js +++ b/tests/__tests__/auto-cleanup.js @@ -1,14 +1,13 @@ import { render } from '@testing-library/vue' import '@testing-library/jest-dom/extend-expect' -const HelloWorldComponent = { - template: `

Hello World

` -} // This just verifies that by importing VTL in an // environment which supports afterEach (like jest) // we'll get automatic cleanup between tests. test('render the first component', () => { - const { container } = render(HelloWorldComponent) + const { container } = render({ + template: `

Hello World

` + }) const h1 = container.querySelector('h1') expect(h1).toHaveTextContent('Hello World') From 5fa4a750b18c6a8e99054938a9d9474f0647ba88 Mon Sep 17 00:00:00 2001 From: Ojo Oluwasetemi Date: Thu, 15 Aug 2019 00:18:00 +0100 Subject: [PATCH 07/11] update the test to use matchinlinesnapshot --- tests/__tests__/auto-cleanup-skip.js | 12 +++++++++++- tests/__tests__/auto-cleanup.js | 12 +++++++----- 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/tests/__tests__/auto-cleanup-skip.js b/tests/__tests__/auto-cleanup-skip.js index 32b5d218..ed4e2e2c 100644 --- a/tests/__tests__/auto-cleanup-skip.js +++ b/tests/__tests__/auto-cleanup-skip.js @@ -11,8 +11,18 @@ test('first test render a vue component', () => { render({ template: `

Hello World

` }) + + expect(document.body.innerHTML).toMatchInlineSnapshot(` +
+

Hello World

+
+ `) }) test('no cleanup should have happened, renders the first component still', () => { - expect(document.body.innerHTML).toEqual('

Hello World

') + expect(document.body.innerHTML).toMatchInlineSnapshot(` +
+

Hello World

+
+ `) }) diff --git a/tests/__tests__/auto-cleanup.js b/tests/__tests__/auto-cleanup.js index 91c5eb13..b7b2041a 100644 --- a/tests/__tests__/auto-cleanup.js +++ b/tests/__tests__/auto-cleanup.js @@ -5,14 +5,16 @@ import '@testing-library/jest-dom/extend-expect' // environment which supports afterEach (like jest) // we'll get automatic cleanup between tests. test('render the first component', () => { - const { container } = render({ + render({ template: `

Hello World

` }) - - const h1 = container.querySelector('h1') - expect(h1).toHaveTextContent('Hello World') + expect(document.body.innerHTML).toMatchInlineSnapshot(` +
+

Hello World

+
+ `) }) test('cleans up after each test by default', () => { - expect(document.body.innerHTML).toEqual('') + expect(document.body.innerHTML).toMatchInlineSnapshot(`""`) }) From deeb434f235d132004433a088fd8d5f655f5c9d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= Date: Mon, 19 Aug 2019 08:25:28 +0200 Subject: [PATCH 08/11] Format --- cleanup-after-each.js | 2 +- src/__tests__/stubs.js | 2 +- src/__tests__/vueI18n.js | 3 +-- src/__tests__/vuex.js | 2 +- tests/__tests__/auto-cleanup-skip.js | 5 +++-- tests/__tests__/auto-cleanup.js | 4 ++-- tests/__tests__/within.js | 8 ++++---- 7 files changed, 13 insertions(+), 13 deletions(-) diff --git a/cleanup-after-each.js b/cleanup-after-each.js index 00a12665..7515c787 100644 --- a/cleanup-after-each.js +++ b/cleanup-after-each.js @@ -1,3 +1,3 @@ console.warn( - 'The module `@testing-library/vue/cleanup-after-each` has been deprecated and no longer does anything (it is not needed). You no longer need to import this module and can safely remove any import or configuration which imports this module' + 'The module `@testing-library/vue/cleanup-after-each` has been deprecated and no longer does anything (it is not needed). You no longer need to import this module and can safely remove any import or configuration which imports this module', ) diff --git a/src/__tests__/stubs.js b/src/__tests__/stubs.js index 4c220bb8..d7b15c06 100644 --- a/src/__tests__/stubs.js +++ b/src/__tests__/stubs.js @@ -1,4 +1,4 @@ -import { render } from '@testing-library/vue' +import {render} from '@testing-library/vue' import Stubs from './components/Stubs' test('Form contains search button', () => { diff --git a/src/__tests__/vueI18n.js b/src/__tests__/vueI18n.js index 4f569eb4..e164fd5a 100644 --- a/src/__tests__/vueI18n.js +++ b/src/__tests__/vueI18n.js @@ -1,5 +1,5 @@ import '@testing-library/jest-dom/extend-expect' -import { render, fireEvent } from '@testing-library/vue' +import {render, fireEvent} from '@testing-library/vue' import Vuei18n from 'vue-i18n' import VueI18n from './components/VueI18n' @@ -14,7 +14,6 @@ const messages = { test('renders translations', async () => { const {queryByText, getByText} = render(VueI18n, {}, vue => { - // Let's register Vuei18n normally vue.use(Vuei18n) diff --git a/src/__tests__/vuex.js b/src/__tests__/vuex.js index c76b8d89..79b81cc5 100644 --- a/src/__tests__/vuex.js +++ b/src/__tests__/vuex.js @@ -1,5 +1,5 @@ import '@testing-library/jest-dom/extend-expect' -import { render, fireEvent } from '@testing-library/vue' +import {render, fireEvent} from '@testing-library/vue' import VuexTest from './components/Store/VuexTest' import {store} from './components/Store/store' diff --git a/tests/__tests__/auto-cleanup-skip.js b/tests/__tests__/auto-cleanup-skip.js index ed4e2e2c..265a3c1b 100644 --- a/tests/__tests__/auto-cleanup-skip.js +++ b/tests/__tests__/auto-cleanup-skip.js @@ -1,7 +1,8 @@ let render beforeAll(async () => { process.env.VTL_SKIP_AUTO_CLEANUP = 'true' - const vtl = await import('@testing-library/vue') + // eslint-disable-next-line + const vtl = await require('@testing-library/vue') render = vtl.render }) @@ -9,7 +10,7 @@ beforeAll(async () => { // then we DON'T auto-wire up the afterEach for folks test('first test render a vue component', () => { render({ - template: `

Hello World

` + template: `

Hello World

`, }) expect(document.body.innerHTML).toMatchInlineSnapshot(` diff --git a/tests/__tests__/auto-cleanup.js b/tests/__tests__/auto-cleanup.js index b7b2041a..37fa8a29 100644 --- a/tests/__tests__/auto-cleanup.js +++ b/tests/__tests__/auto-cleanup.js @@ -1,4 +1,4 @@ -import { render } from '@testing-library/vue' +import {render} from '@testing-library/vue' import '@testing-library/jest-dom/extend-expect' // This just verifies that by importing VTL in an @@ -6,7 +6,7 @@ import '@testing-library/jest-dom/extend-expect' // we'll get automatic cleanup between tests. test('render the first component', () => { render({ - template: `

Hello World

` + template: `

Hello World

`, }) expect(document.body.innerHTML).toMatchInlineSnapshot(`
diff --git a/tests/__tests__/within.js b/tests/__tests__/within.js index e23a0085..de04c76f 100644 --- a/tests/__tests__/within.js +++ b/tests/__tests__/within.js @@ -1,19 +1,19 @@ -import { render, within } from '@testing-library/vue' +import {render, within} from '@testing-library/vue' test('within() returns an object with all queries bound to the DOM node', () => { - const { getByTestId, getByText } = render({ + const {getByTestId, getByText} = render({ template: `

repeated text

repeated text
- ` + `, }) // getByText() provided by render() fails because it finds multiple elements // with the same text (as expected). expect(() => getByText('repeated text')).toThrow( - 'Found multiple elements with the text: repeated text' + 'Found multiple elements with the text: repeated text', ) const divNode = getByTestId('div') From de1146b330c0d22e07fabbbb2cb74c189437eaed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= Date: Mon, 19 Aug 2019 09:07:35 +0200 Subject: [PATCH 09/11] Remove unnecessary eslint-ignore --- tests/__tests__/auto-cleanup-skip.js | 1 - 1 file changed, 1 deletion(-) diff --git a/tests/__tests__/auto-cleanup-skip.js b/tests/__tests__/auto-cleanup-skip.js index 265a3c1b..5423ef52 100644 --- a/tests/__tests__/auto-cleanup-skip.js +++ b/tests/__tests__/auto-cleanup-skip.js @@ -1,7 +1,6 @@ let render beforeAll(async () => { process.env.VTL_SKIP_AUTO_CLEANUP = 'true' - // eslint-disable-next-line const vtl = await require('@testing-library/vue') render = vtl.render }) From a07423eb46e794d2f98952a884ce8137701a77f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= Date: Mon, 19 Aug 2019 09:11:47 +0200 Subject: [PATCH 10/11] Add explanation --- src/vue-testing-library.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js index 7207897e..77316df0 100644 --- a/src/vue-testing-library.js +++ b/src/vue-testing-library.js @@ -160,6 +160,10 @@ fireEvent.update = (elem, value) => { return null } +// If we're running in a test runner that supports afterEach then we'll +// automatically run cleanup after each test. This ensures that tests run in +// isolation from each other. +// If you don't like this, set the VTL_SKIP_AUTO_CLEANUP variable to 'true'. if (typeof afterEach === 'function' && !process.env.VTL_SKIP_AUTO_CLEANUP) { afterEach(() => { cleanup() From 5af5d16459892de08ebd9e0ec0b2ed1616ec1dae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= Date: Mon, 19 Aug 2019 09:13:13 +0200 Subject: [PATCH 11/11] Move tests to the appropriate folder --- {tests => src}/__tests__/auto-cleanup-skip.js | 0 {tests => src}/__tests__/auto-cleanup.js | 0 {tests => src}/__tests__/within.js | 0 3 files changed, 0 insertions(+), 0 deletions(-) rename {tests => src}/__tests__/auto-cleanup-skip.js (100%) rename {tests => src}/__tests__/auto-cleanup.js (100%) rename {tests => src}/__tests__/within.js (100%) diff --git a/tests/__tests__/auto-cleanup-skip.js b/src/__tests__/auto-cleanup-skip.js similarity index 100% rename from tests/__tests__/auto-cleanup-skip.js rename to src/__tests__/auto-cleanup-skip.js diff --git a/tests/__tests__/auto-cleanup.js b/src/__tests__/auto-cleanup.js similarity index 100% rename from tests/__tests__/auto-cleanup.js rename to src/__tests__/auto-cleanup.js diff --git a/tests/__tests__/within.js b/src/__tests__/within.js similarity index 100% rename from tests/__tests__/within.js rename to src/__tests__/within.js