From 47992760464d2197395be2514802e73600cb5e0a Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Tue, 30 Jan 2024 10:16:53 -0500 Subject: [PATCH 1/5] add FAQ entry for onMount --- docs/svelte-testing-library/faq.mdx | 33 +++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/docs/svelte-testing-library/faq.mdx b/docs/svelte-testing-library/faq.mdx index bd2ab5dbe..92a4f825b 100644 --- a/docs/svelte-testing-library/faq.mdx +++ b/docs/svelte-testing-library/faq.mdx @@ -5,6 +5,7 @@ sidebar_label: FAQ --- - [Does this library also work with SvelteKit?](#does-this-library-also-work-with-sveltekit) +- [`onMount` isn't called when rendering components](#onmount-isnt-called-when-rendering-compoments) - [Testing file upload component](#testing-file-upload-component) --- @@ -14,6 +15,38 @@ sidebar_label: FAQ Yes, it does. It requires the same [setup](setup.mdx) as a "normal" Svelte project. +## `onMount` isn't called when rendering components + +Since the test is running in a Node environment instead of a browser +environment, it uses the SSR exports from svelte, which declare +all lifecycle events as no-ops. + +One solution is to configure vite to use browser resolutions. + +``` +// in vite.config.js + +import { svelte } from '@sveltejs/vite-plugin-svelte'; +import { defineConfig } from 'vite'; + +export default defineConfig(({ mode }) => ({ + plugins: [svelte()], + resolve: { + // the default would be [ 'svelte', 'node' ] + // as set by vite-plugin-svelte and vite itself + conditions: mode === 'test' ? ['browser'] : [], + }, + test: { + environment: 'jsdom', + }, +}; + +``` + +See +[svelte-testing-library's issue 222](https://github.com/testing-library/svelte-testing-library/issues/222) +for more details. + ## Testing file upload component File upload handler not triggering? Use `happy-dom`, not `jsdom`, and make sure From 3279f888f6daa44824d927b7f2d113ab568bf7a4 Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Wed, 31 Jan 2024 14:53:15 -0500 Subject: [PATCH 2/5] move filename in the title Co-authored-by: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com> --- docs/svelte-testing-library/faq.mdx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/svelte-testing-library/faq.mdx b/docs/svelte-testing-library/faq.mdx index 92a4f825b..f18710882 100644 --- a/docs/svelte-testing-library/faq.mdx +++ b/docs/svelte-testing-library/faq.mdx @@ -23,8 +23,7 @@ all lifecycle events as no-ops. One solution is to configure vite to use browser resolutions. -``` -// in vite.config.js +```js title="vite.config.js" import { svelte } from '@sveltejs/vite-plugin-svelte'; import { defineConfig } from 'vite'; From e07362d96e063a7db07a04b9e273e631d6ca1ed3 Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Wed, 31 Jan 2024 14:54:09 -0500 Subject: [PATCH 3/5] Update docs/svelte-testing-library/faq.mdx Co-authored-by: Michael Cousins --- docs/svelte-testing-library/faq.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/svelte-testing-library/faq.mdx b/docs/svelte-testing-library/faq.mdx index f18710882..4fd314d68 100644 --- a/docs/svelte-testing-library/faq.mdx +++ b/docs/svelte-testing-library/faq.mdx @@ -32,7 +32,7 @@ export default defineConfig(({ mode }) => ({ plugins: [svelte()], resolve: { // the default would be [ 'svelte', 'node' ] - // as set by vite-plugin-svelte and vite itself + // as set by vite-plugin-svelte and vitest conditions: mode === 'test' ? ['browser'] : [], }, test: { From f727632cadab2a6508d65254c5ab732b14f167c6 Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Wed, 31 Jan 2024 14:54:17 -0500 Subject: [PATCH 4/5] Update docs/svelte-testing-library/faq.mdx Co-authored-by: Michael Cousins --- docs/svelte-testing-library/faq.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/svelte-testing-library/faq.mdx b/docs/svelte-testing-library/faq.mdx index 4fd314d68..3965c7f17 100644 --- a/docs/svelte-testing-library/faq.mdx +++ b/docs/svelte-testing-library/faq.mdx @@ -21,7 +21,7 @@ Since the test is running in a Node environment instead of a browser environment, it uses the SSR exports from svelte, which declare all lifecycle events as no-ops. -One solution is to configure vite to use browser resolutions. +One solution is to configure Vite to use browser resolutions in tests. ```js title="vite.config.js" From 43bce317a414dfba05704797269f4ac9b64b259d Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Wed, 31 Jan 2024 14:54:25 -0500 Subject: [PATCH 5/5] Update docs/svelte-testing-library/faq.mdx Co-authored-by: Michael Cousins --- docs/svelte-testing-library/faq.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/svelte-testing-library/faq.mdx b/docs/svelte-testing-library/faq.mdx index 3965c7f17..8a0c8099d 100644 --- a/docs/svelte-testing-library/faq.mdx +++ b/docs/svelte-testing-library/faq.mdx @@ -18,7 +18,7 @@ project. ## `onMount` isn't called when rendering components Since the test is running in a Node environment instead of a browser -environment, it uses the SSR exports from svelte, which declare +environment, it uses the SSR exports from Svelte, which declare all lifecycle events as no-ops. One solution is to configure Vite to use browser resolutions in tests.