test(rsc): test assets (#733)

Author: hi-ogawa

packages/plugin-rsc/e2e/basic.test.ts

@@ -1179,4 +1179,28 @@ function defineTest(f: Fixture) {
       await expect(page.locator(selector)).toHaveCSS('color', color)
     }
   })
+
+  test('assets', async ({ page }) => {
+    await page.goto(f.url())
+    await waitForHydration(page)
+    await expect(
+      page.getByTestId('test-assets-server-import'),
+    ).not.toHaveJSProperty('naturalWidth', 0)
+    await expect(
+      page.getByTestId('test-assets-client-import'),
+    ).not.toHaveJSProperty('naturalWidth', 0)
+
+    async function testBackgroundImage(selector: string) {
+      const url = await page
+        .locator(selector)
+        .evaluate((el) => getComputedStyle(el).backgroundImage)
+      expect(url).toMatch(/^url\(.*\)$/)
+      const response = await page.request.get(url.slice(5, -2))
+      expect(response.ok()).toBeTruthy()
+      expect(response.headers()['content-type']).toBe('image/svg+xml')
+    }
+
+    await testBackgroundImage('.test-assets-server-css')
+    await testBackgroundImage('.test-assets-client-css')
+  })
 }

packages/plugin-rsc/examples/basic/src/routes/assets/client-css.svg

@@ -0,0 +1,6 @@
+.test-assets-client-css {
+  background: url(./client-css.svg) no-repeat;
+  background-size: contain;
+  width: 20px;
+  height: 20px;
+}

packages/plugin-rsc/examples/basic/src/routes/assets/client.css

@@ -0,0 +1,19 @@
+'use client'
+
+import './client.css'
+import svg from './client.svg?no-inline'
+
+export function TestAssetsClient() {
+  return (
+    <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+      <span>test-assets-client</span>
+      <img
+        src={svg}
+        data-testid="test-assets-client-import"
+        width="20"
+        height="20"
+      />
+      <span className="test-assets-client-css" />
+    </div>
+  )
+}

packages/plugin-rsc/examples/basic/src/routes/assets/client.svg

@@ -0,0 +1,6 @@
+.test-assets-server-css {
+  background: url(./server-css.svg) no-repeat;
+  background-size: contain;
+  width: 20px;
+  height: 20px;
+}

packages/plugin-rsc/examples/basic/src/routes/assets/client.tsx

@@ -0,0 +1,21 @@
+import { TestAssetsClient } from './client'
+import './server.css'
+import svg from './server.svg?no-inline'
+
+export function TestAssetsServer() {
+  return (
+    <>
+      <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+        <span>test-assets-server</span>
+        <img
+          src={svg}
+          data-testid="test-assets-server-import"
+          width="20"
+          height="20"
+        />
+        <span className="test-assets-server-css" />
+      </div>
+      <TestAssetsClient />
+    </>
+  )
+}

packages/plugin-rsc/examples/basic/src/routes/assets/server-css.svg

@@ -37,6 +37,7 @@ import { TestHmrSharedClient } from './hmr-shared/client'
 import { TestHmrSharedAtomic } from './hmr-shared/atomic/server'
 import { TestCssQueries } from './css-queries/server'
 import { TestImportMetaGlob } from './import-meta-glob/server'
+import { TestAssetsServer } from './assets/server'
 
 export function Root(props: { url: URL }) {
   return (
@@ -87,6 +88,7 @@ export function Root(props: { url: URL }) {
         <TestReactCache url={props.url} />
         <TestCssQueries />
         <TestImportMetaGlob />
+        <TestAssetsServer />
       </body>
     </html>
   )