Passing tests

eslint.config.js

@@ -30,7 +30,6 @@ export default [
       'static/built/*',
       'static/styleguide/*',
       'yarn.lock',
-      'vite.config.ts.timestamp*',
     ],
   },
   js.configs.recommended,

package.json

@@ -43,7 +43,7 @@
     "@sveltejs/kit": "^2.7.2",
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/svelte": "^5.2.3",
+    "@testing-library/svelte": "^5.2.4",
     "@types/eslint-config-prettier": "^6.11.3",
     "@types/eslint__js": "^8.42.3",
     "@types/lodash": "^4.17.10",

src/lib/components/util/Icon.svelte

@@ -34,10 +34,10 @@
 
   let { name, size = null }: Props = $props();
 
-  const SvelteComponent_1 = $derived(icons[name] ?? null);
+  const IconComponent = $derived(icons[name] ?? null);
 </script>
 
-<SvelteComponent_1
+<IconComponent
   data-icon={name}
   data-icon-size={size}
   aria-hidden="true"

test/lib/components/CopyButton.spec.ts

@@ -2,6 +2,10 @@ import { fireEvent, render, waitFor } from '@testing-library/svelte';
 
 import CopyButton from '$lib/components/util/CopyButton.svelte';
 
+function getFirstNonCommentChild(node: Node) {
+  return [...node.childNodes].find((x) => x.nodeType !== Node.COMMENT_NODE);
+}
+
 describe('Copy Button', () => {
   beforeEach(() => {
     vi.useFakeTimers();
@@ -17,7 +21,10 @@ describe('Copy Button', () => {
     });
     const button = getByRole('button');
 
-    expect(button.firstChild).toHaveAttribute('data-icon', 'clipboard');
+    expect(getFirstNonCommentChild(button)).toHaveAttribute(
+      'data-icon',
+      'clipboard',
+    );
   });
 
   it('copies content', async () => {
@@ -27,7 +34,10 @@ describe('Copy Button', () => {
     });
     const button = getByRole('button');
 
-    expect(button.firstChild).toHaveAttribute('data-icon', 'clipboard');
+    expect(getFirstNonCommentChild(button)).toHaveAttribute(
+      'data-icon',
+      'clipboard',
+    );
 
     await fireEvent.click(button);
 
@@ -40,15 +50,24 @@ describe('Copy Button', () => {
     });
     const button = getByRole('button');
 
-    expect(button.firstChild).toHaveAttribute('data-icon', 'clipboard');
+    expect(getFirstNonCommentChild(button)).toHaveAttribute(
+      'data-icon',
+      'clipboard',
+    );
 
     await fireEvent.click(button);
 
-    expect(button.firstChild).toHaveAttribute('data-icon', 'copy');
+    expect(getFirstNonCommentChild(button)).toHaveAttribute(
+      'data-icon',
+      'copy',
+    );
 
     vi.runAllTimers();
     await waitFor(() => {
-      expect(button.firstChild).toHaveAttribute('data-icon', 'clipboard');
+      expect(getFirstNonCommentChild(button)).toHaveAttribute(
+        'data-icon',
+        'clipboard',
+      );
     });
   });
 });

test/setup.ts

@@ -5,4 +5,6 @@ beforeAll(() => {
   // @ts-expect-error Clipboard isn't writable...
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   window.navigator.clipboard = { writeText: () => {} };
+  // @ts-expect-error Allow partial MediaQueryList response
+  window.matchMedia = () => ({ matches: true });
 });

vitest.config.ts

@@ -1,3 +1,4 @@
+import { svelteTesting } from '@testing-library/svelte/vite';
 import {
   coverageConfigDefaults,
   defineConfig,
@@ -12,6 +13,7 @@ import viteConfig from './vite.config.js';
 export default mergeConfig(
   viteConfig,
   defineConfig({
+    plugins: [svelteTesting()],
     test: {
       include: ['./test/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
       globals: true,

yarn.lock

@@ -788,9 +788,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/svelte@npm:^5.2.3":
-  version: 5.2.3
-  resolution: "@testing-library/svelte@npm:5.2.3"
+"@testing-library/svelte@npm:^5.2.4":
+  version: 5.2.4
+  resolution: "@testing-library/svelte@npm:5.2.4"
   dependencies:
     "@testing-library/dom": "npm:^10.0.0"
   peerDependencies:
@@ -802,7 +802,7 @@ __metadata:
       optional: true
     vitest:
       optional: true
-  checksum: 10/db39a364f2d5f9cfa3c0479f2ef91da58b73599e884aeedd6059401c5f519878d37398bf14786b29cee201e8ff9c4536f24118f12274f38fbd83c788ba9c610e
+  checksum: 10/b2c2c7d3dcfcc271ffcc8c74b41fb32cce934d73ff13326c12ad9c352ab3a73b9e6b38465f56f9fab1d9836cded33fd6deff4071dbd0a81fd2827cf7c9703be9
   languageName: node
   linkType: hard
 
@@ -5955,7 +5955,7 @@ __metadata:
     "@sveltejs/kit": "npm:^2.7.2"
     "@sveltejs/vite-plugin-svelte": "npm:^4.0.0"
     "@testing-library/jest-dom": "npm:^6.5.0"
-    "@testing-library/svelte": "npm:^5.2.3"
+    "@testing-library/svelte": "npm:^5.2.4"
     "@types/eslint-config-prettier": "npm:^6.11.3"
     "@types/eslint__js": "npm:^8.42.3"
     "@types/lodash": "npm:^4.17.10"