diff --git a/cleanup-after-each.js b/cleanup-after-each.js
index 4da4319c..7515c787 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',
+)
diff --git a/src/__tests__/auto-cleanup-skip.js b/src/__tests__/auto-cleanup-skip.js
new file mode 100644
index 00000000..5423ef52
--- /dev/null
+++ b/src/__tests__/auto-cleanup-skip.js
@@ -0,0 +1,28 @@
+let render
+beforeAll(async () => {
+ process.env.VTL_SKIP_AUTO_CLEANUP = 'true'
+ const vtl = await require('@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
`,
+ })
+
+ expect(document.body.innerHTML).toMatchInlineSnapshot(`
+
+
Hello World
+
+ `)
+})
+
+test('no cleanup should have happened, renders the first component still', () => {
+ expect(document.body.innerHTML).toMatchInlineSnapshot(`
+
+
Hello World
+
+ `)
+})
diff --git a/src/__tests__/auto-cleanup.js b/src/__tests__/auto-cleanup.js
new file mode 100644
index 00000000..37fa8a29
--- /dev/null
+++ b/src/__tests__/auto-cleanup.js
@@ -0,0 +1,20 @@
+import {render} from '@testing-library/vue'
+import '@testing-library/jest-dom/extend-expect'
+
+// 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', () => {
+ render({
+ template: `Hello World
`,
+ })
+ expect(document.body.innerHTML).toMatchInlineSnapshot(`
+
+
Hello World
+
+ `)
+})
+
+test('cleans up after each test by default', () => {
+ expect(document.body.innerHTML).toMatchInlineSnapshot(`""`)
+})
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..d7b15c06 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..e164fd5a 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,19 @@ 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..79b81cc5 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.
diff --git a/tests/__tests__/within.js b/src/__tests__/within.js
similarity index 84%
rename from tests/__tests__/within.js
rename to src/__tests__/within.js
index e23a0085..de04c76f 100644
--- a/tests/__tests__/within.js
+++ b/src/__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')
diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js
index d47c6348..77316df0 100644
--- a/src/vue-testing-library.js
+++ b/src/vue-testing-library.js
@@ -160,5 +160,15 @@ 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()
+ })
+}
+
export * from '@testing-library/dom'
export {cleanup, render, fireEvent}