From dcdcf4ef73940a0e4e7b2b6f24e3b92734ad1a3d Mon Sep 17 00:00:00 2001 From: Kyle Nazario Date: Sun, 29 Oct 2023 16:39:33 -0400 Subject: [PATCH 1/6] Calls out globals in documentation --- docs/svelte-testing-library/api.mdx | 2 +- docs/svelte-testing-library/setup.mdx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/svelte-testing-library/api.mdx b/docs/svelte-testing-library/api.mdx index 7af1ac643..4b0ab526f 100644 --- a/docs/svelte-testing-library/api.mdx +++ b/docs/svelte-testing-library/api.mdx @@ -70,7 +70,7 @@ const {results} = render(YourComponent, {myProp: 'value'}) ## `cleanup` -> You don't need to import or use this, it's done automagically for you! +> You don't need to import or use this, it's done automagically for you with `globals: true` in your test config! Unmounts the component from the container and destroys the container. diff --git a/docs/svelte-testing-library/setup.mdx b/docs/svelte-testing-library/setup.mdx index d5bac8768..3d1b46bb9 100644 --- a/docs/svelte-testing-library/setup.mdx +++ b/docs/svelte-testing-library/setup.mdx @@ -46,7 +46,7 @@ npm install --save-dev @vitest/ui npm install --save-dev @sveltejs/vite-plugin-svelte vite ``` -3. Add a `vitest.config.ts` configuration file to the root of your project +3. Add a `vitest.config.ts` configuration file to the root of your project. Add `globals: true` so `cleanup()` runs after each test. ```js import {defineConfig} from 'vitest/config' @@ -55,7 +55,7 @@ npm install --save-dev @vitest/ui export default defineConfig({ plugins: [svelte({hot: !process.env.VITEST})], test: { - globals: true, + globals: true environment: 'jsdom', }, }) From 46b5e06c31cf4fccabea2676b457e142eeb82200 Mon Sep 17 00:00:00 2001 From: Kyle Nazario Date: Sun, 29 Oct 2023 16:46:06 -0400 Subject: [PATCH 2/6] Restores comma --- docs/svelte-testing-library/setup.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/svelte-testing-library/setup.mdx b/docs/svelte-testing-library/setup.mdx index 3d1b46bb9..6f2efd201 100644 --- a/docs/svelte-testing-library/setup.mdx +++ b/docs/svelte-testing-library/setup.mdx @@ -55,7 +55,7 @@ npm install --save-dev @vitest/ui export default defineConfig({ plugins: [svelte({hot: !process.env.VITEST})], test: { - globals: true + globals: true, environment: 'jsdom', }, }) From 32505be8ff0ab95bb597f03e47b3098708e54168 Mon Sep 17 00:00:00 2001 From: Kyle Nazario Date: Sun, 29 Oct 2023 16:51:25 -0400 Subject: [PATCH 3/6] Formatting --- docs/svelte-testing-library/api.mdx | 3 ++- docs/svelte-testing-library/setup.mdx | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/svelte-testing-library/api.mdx b/docs/svelte-testing-library/api.mdx index 4b0ab526f..a167d4045 100644 --- a/docs/svelte-testing-library/api.mdx +++ b/docs/svelte-testing-library/api.mdx @@ -70,7 +70,8 @@ const {results} = render(YourComponent, {myProp: 'value'}) ## `cleanup` -> You don't need to import or use this, it's done automagically for you with `globals: true` in your test config! +> You don't need to import or use this, it's done automagically for you with +> `globals: true` in your test config! Unmounts the component from the container and destroys the container. diff --git a/docs/svelte-testing-library/setup.mdx b/docs/svelte-testing-library/setup.mdx index 6f2efd201..2bfcb7f7c 100644 --- a/docs/svelte-testing-library/setup.mdx +++ b/docs/svelte-testing-library/setup.mdx @@ -46,7 +46,8 @@ npm install --save-dev @vitest/ui npm install --save-dev @sveltejs/vite-plugin-svelte vite ``` -3. Add a `vitest.config.ts` configuration file to the root of your project. Add `globals: true` so `cleanup()` runs after each test. +3. Add a `vitest.config.ts` configuration file to the root of your project. Add + `globals: true` so `cleanup()` runs after each test. ```js import {defineConfig} from 'vitest/config' From e1516d11d570d2018d7c1cc47d3f30b55d7e9487 Mon Sep 17 00:00:00 2001 From: Kyle Nazario Date: Mon, 30 Oct 2023 09:42:20 -0400 Subject: [PATCH 4/6] Svelte cleanup docs match React language --- docs/react-testing-library/api.mdx | 6 ++---- docs/svelte-testing-library/api.mdx | 4 ++-- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/docs/react-testing-library/api.mdx b/docs/react-testing-library/api.mdx index 6150b6418..eada4596f 100644 --- a/docs/react-testing-library/api.mdx +++ b/docs/react-testing-library/api.mdx @@ -289,10 +289,8 @@ expect(firstRender).toMatchDiffSnapshot(asFragment()) Unmounts React trees that were mounted with [render](#render). -> Please note that this is done automatically if the testing framework you're -> using supports the `afterEach` global and it is injected to your testing -> environment (like mocha, Jest, and Jasmine). If not, you will need to do -> manual cleanups after each test. +> This is called automatically if your testing framework (such as mocha, Jest or +> Jasmine) injects a global `afterEach()` function into the testing environment. For example, if you're using the [ava](https://github.com/avajs/ava) testing framework, then you would need to use the `test.afterEach` hook like so: diff --git a/docs/svelte-testing-library/api.mdx b/docs/svelte-testing-library/api.mdx index a167d4045..10e5e7963 100644 --- a/docs/svelte-testing-library/api.mdx +++ b/docs/svelte-testing-library/api.mdx @@ -70,8 +70,8 @@ const {results} = render(YourComponent, {myProp: 'value'}) ## `cleanup` -> You don't need to import or use this, it's done automagically for you with -> `globals: true` in your test config! +> This is called automatically if your testing framework (such as mocha, Jest or +> Jasmine) injects a global `afterEach()` function into the testing environment. Unmounts the component from the container and destroys the container. From d603d3f9a53654fc17902b0178e600a016c65b04 Mon Sep 17 00:00:00 2001 From: Kyle Nazario Date: Mon, 30 Oct 2023 09:47:22 -0400 Subject: [PATCH 5/6] Clarifies cleanup docs for Vue and Preact --- docs/preact-testing-library/api.mdx | 8 +++++--- docs/vue-testing-library/api.mdx | 5 ++--- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/docs/preact-testing-library/api.mdx b/docs/preact-testing-library/api.mdx index ca4d8691f..c01cd978c 100644 --- a/docs/preact-testing-library/api.mdx +++ b/docs/preact-testing-library/api.mdx @@ -52,9 +52,11 @@ const {results} = render(, {options}) Unmounts the component from the container and destroys the container. -📝 When you import anything from the library, this automatically runs after each -test. If you'd like to disable this then set `process.env.PTL_SKIP_AUTO_CLEANUP` -to true when running your tests. +> This is called automatically if your testing framework (such as mocha, Jest or +> Jasmine) injects a global `afterEach()` function into the testing environment. + +If you'd like to disable this then set `process.env.PTL_SKIP_AUTO_CLEANUP` to +true when running your tests. ```jsx import {render, cleanup} from '@testing-library/preact' diff --git a/docs/vue-testing-library/api.mdx b/docs/vue-testing-library/api.mdx index 3bac572ba..862871b1d 100644 --- a/docs/vue-testing-library/api.mdx +++ b/docs/vue-testing-library/api.mdx @@ -232,9 +232,8 @@ See a working example of `update` in the Unmounts Vue trees that were mounted with [render](#rendercomponent-options-callback). -> If you are using an environment that supports `afterEach` hook (as in Jest), -> there's no need to call `cleanup` manually. Vue Testing Library handles it for -> you. +> This is called automatically if your testing framework (such as mocha, Jest or +> Jasmine) injects a global `afterEach()` function into the testing environment. Failing to call `cleanup` when you've called `render` could result in a memory leak and tests which are not idempotent (which can lead to difficult to debug From 32aa9384d46e1407f462cf3139378aa92a0e8500 Mon Sep 17 00:00:00 2001 From: Kyle Nazario Date: Mon, 30 Oct 2023 13:46:30 -0400 Subject: [PATCH 6/6] Instructs user to call cleanup() themselves --- docs/preact-testing-library/api.mdx | 1 + docs/react-testing-library/api.mdx | 1 + docs/svelte-testing-library/api.mdx | 1 + docs/vue-testing-library/api.mdx | 1 + 4 files changed, 4 insertions(+) diff --git a/docs/preact-testing-library/api.mdx b/docs/preact-testing-library/api.mdx index c01cd978c..18dd43131 100644 --- a/docs/preact-testing-library/api.mdx +++ b/docs/preact-testing-library/api.mdx @@ -54,6 +54,7 @@ Unmounts the component from the container and destroys the container. > This is called automatically if your testing framework (such as mocha, Jest or > Jasmine) injects a global `afterEach()` function into the testing environment. +> If not, you will need to call `cleanup()` after each test. If you'd like to disable this then set `process.env.PTL_SKIP_AUTO_CLEANUP` to true when running your tests. diff --git a/docs/react-testing-library/api.mdx b/docs/react-testing-library/api.mdx index eada4596f..366a56f9f 100644 --- a/docs/react-testing-library/api.mdx +++ b/docs/react-testing-library/api.mdx @@ -291,6 +291,7 @@ Unmounts React trees that were mounted with [render](#render). > This is called automatically if your testing framework (such as mocha, Jest or > Jasmine) injects a global `afterEach()` function into the testing environment. +> If not, you will need to call `cleanup()` after each test. For example, if you're using the [ava](https://github.com/avajs/ava) testing framework, then you would need to use the `test.afterEach` hook like so: diff --git a/docs/svelte-testing-library/api.mdx b/docs/svelte-testing-library/api.mdx index 10e5e7963..c0171dd21 100644 --- a/docs/svelte-testing-library/api.mdx +++ b/docs/svelte-testing-library/api.mdx @@ -72,6 +72,7 @@ const {results} = render(YourComponent, {myProp: 'value'}) > This is called automatically if your testing framework (such as mocha, Jest or > Jasmine) injects a global `afterEach()` function into the testing environment. +> If not, you will need to call `cleanup()` after each test. Unmounts the component from the container and destroys the container. diff --git a/docs/vue-testing-library/api.mdx b/docs/vue-testing-library/api.mdx index 862871b1d..fc5cc4a17 100644 --- a/docs/vue-testing-library/api.mdx +++ b/docs/vue-testing-library/api.mdx @@ -234,6 +234,7 @@ Unmounts Vue trees that were mounted with > This is called automatically if your testing framework (such as mocha, Jest or > Jasmine) injects a global `afterEach()` function into the testing environment. +> If not, you will need to call `cleanup()` after each test. Failing to call `cleanup` when you've called `render` could result in a memory leak and tests which are not idempotent (which can lead to difficult to debug