fix!: add CSS styles to DOM (#1690)

* fix: add CSS styles to DOM

* chore: set type on style

examples/react-testing-lib/src/App.test.tsx

@@ -13,4 +13,11 @@ describe('Simple working test', () => {
     userEvent.click(screen.getByRole('button'))
     expect(await screen.findByText(/count is: 1/i)).toBeInTheDocument()
   })
+
+  it('uses flexbox in app header', async () => {
+    render(<App />)
+    const element = screen.getByRole('banner')
+    expect(element.className).toEqual('App-header')
+    expect(getComputedStyle(element).display).toEqual('flex')
+  })
 })

examples/react-testing-lib/vite.config.ts

@@ -11,5 +11,8 @@ export default defineConfig({
     globals: true,
     environment: 'jsdom',
     setupFiles: './src/test/setup.ts',
+    // you might want to disable it, if you don't have tests that rely on CSS
+    // since parsing CSS is slow
+    css: true,
   },
 })

packages/vite-node/src/client.ts

@@ -23,7 +23,21 @@ export const DEFAULT_REQUEST_STUBS = {
         on: () => {},
       }
     },
-    updateStyle() {},
+    updateStyle(id: string, css: string) {
+      if (typeof document === 'undefined')
+        return
+
+      const element = document.getElementById(id)
+      if (element)
+        element.remove()
+
+      const head = document.querySelector('head')
+      const style = document.createElement('style')
+      style.setAttribute('type', 'text/css')
+      style.id = id
+      style.innerHTML = css
+      head?.appendChild(style)
+    },
   },
 }