Test importing and separete jsdom setup

thetarnav · thetarnav · commit e136f8a4c0c3 · 2025-04-27T14:49:11.000+02:00
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
     },
     "scripts": {
         "test:ssr": "node --experimental-strip-types --import solid-node-register --test tests/ssr.test.tsx",
-        "test:client": "node --experimental-strip-types --conditions=browser --import solid-node-register/client --test tests/client.test.tsx",
+        "test:client": "node --experimental-strip-types --conditions=browser --import solid-node-register/client --import ./tests/jsdom.ts --test tests/client.test.tsx",
         "build": "tsc --build",
         "prepublishOnly": "pnpm run build"
     },
diff --git a/tests/client.test.tsx b/tests/client.test.tsx
@@ -1,37 +1,23 @@
 import * as test   from 'node:test'
 import * as assert from 'node:assert/strict'
-import * as s      from 'solid-js'
 import * as sw     from 'solid-js/web'
-import * as jsdom  from 'jsdom'
 
-// Setup JSDOM environment
-const dom = new jsdom.JSDOM('<!DOCTYPE html><div id="app"></div>')
-global.window           = dom.window as any
-global.document         = dom.window.document
-global.DocumentFragment = dom.window.DocumentFragment
+import {TestComponent} from './component.tsx'
 
 const app = document.getElementById('app')!
 
 test.test('Solid Client-side Rendering', () => {
     
-    const [count, setCount] = s.createSignal(0)
+    const dispose = sw.render(() => <TestComponent message='Hello Client!'/>, app)
 
-    let counter!: HTMLParagraphElement
-    
-    const dispose = sw.render(() => <>
-        <div>
-            <h1>Client Test</h1>
-            <p ref={counter}>Count: {count()}</p>
-        </div>
-    </>, app)
-
-    assert.equal(app.querySelector('h1')!.textContent, 'Client Test', 'Should render h1 with correct text')
+    assert.equal(app.querySelector('h1')!.textContent, 'Hello Client!', 'Should render h1 with correct text')
     
+    const counter = app.querySelector('button')!;
     assert.equal(counter.textContent, 'Count: 0', 'Should render initial count value')
     
-    setCount(1)
+    counter.click();
     
-    assert.equal(counter.textContent, 'Count: 1', 'Count should increment after setting count to 1')
+    assert.equal(counter.textContent, 'Count: 1', 'Count should increment after button click')
 
     dispose()
 })
diff --git a/tests/component.tsx b/tests/component.tsx
@@ -0,0 +1,14 @@
+import * as s from 'solid-js'
+
+export const TestComponent = (props: { message: string }) => {
+    const [count, setCount] = s.createSignal(0)
+
+    return (
+        <div>
+            <h1>{props.message}</h1>
+            <button onClick={() => setCount(count() + 1)}>
+                Count: {count()}
+            </button>
+        </div>
+    )
+}
diff --git a/tests/jsdom.ts b/tests/jsdom.ts
@@ -0,0 +1,7 @@
+import * as jsdom from 'jsdom'
+
+// Setup JSDOM environment
+const dom = new jsdom.JSDOM('<!DOCTYPE html><div id="app"></div>')
+global.window           = dom.window as any
+global.document         = dom.window.document
+global.DocumentFragment = dom.window.DocumentFragment
diff --git a/tests/ssr.test.tsx b/tests/ssr.test.tsx
@@ -1,29 +1,15 @@
 import * as test   from 'node:test'
 import * as assert from 'node:assert/strict'
-import * as s      from 'solid-js'
 import * as sw     from 'solid-js/web'
 
-test.test('Solid SSR', () => {
-    
-    const TestComponent = (props: { message: string }) => {
-        const [count] = s.createSignal(0)
+import {TestComponent} from './component.tsx'
 
-        return (
-            <div>
-                <h1>SSR Test</h1>
-                <p>{props.message}</p>
-                <button>
-                    Count: {count()}
-                </button>
-            </div>
-        )
-    }
+test.test('Solid SSR', () => {
 
     let html = sw.renderToString(() => (
         <TestComponent message="Hello from SSR!" />
     ))
 
-    assert.ok(html.includes('SSR Test'), 'Should contain the component title')
     assert.ok(html.includes('Hello from SSR!'), 'Should contain the message prop')
     assert.ok(html.includes('Count: 0'), 'Should contain the initial signal value')
     assert.ok(html.startsWith('<div>'), 'Should start with opening div tag')
diff --git a/tests/tsconfig.json b/tests/tsconfig.json
@@ -4,7 +4,8 @@
         "noEmit": true,
         "jsx": "preserve",
         "jsxImportSource": "solid-js",
-        "rootDir": "."
+        "rootDir": ".",
+        "allowImportingTsExtensions": true
     },
-    "include": ["."],
-}
+    "include": [".", "component/.tsx"],
+}
