diff --git a/docs/src/test-components-js.md b/docs/src/test-components-js.md
index e0bdc000bf..0a9b9cf431 100644
--- a/docs/src/test-components-js.md
+++ b/docs/src/test-components-js.md
@@ -100,7 +100,7 @@ component is mounted using this script. It can be either a `.js`, `.ts`, `.jsx`
 // Apply theme here, add anything your component needs at runtime here.
 ```
 
-### Step 2. Create a test file `src/App.spec.{ts,tsx}`
+### Step 2. Create a test file `src/App.test.{ts,tsx}`
 
 <Tabs
   defaultValue="react"
@@ -113,12 +113,10 @@ component is mounted using this script. It can be either a `.js`, `.ts`, `.jsx`
 }>
 <TabItem value="react">
 
-```js
+```js title="app.test.tsx"
 import { test, expect } from '@playwright/experimental-ct-react';
 import App from './App';
 
-test.use({ viewport: { width: 500, height: 500 } });
-
 test('should work', async ({ mount }) => {
   const component = await mount(<App />);
   await expect(component).toContainText('Learn React');
@@ -129,37 +127,43 @@ test('should work', async ({ mount }) => {
 
 <TabItem value="vue">
 
-```js
+```js title="app.test.ts"
 import { test, expect } from '@playwright/experimental-ct-vue';
 import App from './App.vue';
 
-test.use({ viewport: { width: 500, height: 500 } });
-
 test('should work', async ({ mount }) => {
   const component = await mount(App);
-  await expect(component).toContainText('Vite + Vue');
+  await expect(component).toContainText('Learn Vue');
 });
 ```
 
-If using TypeScript and Vue make sure to add a `vue.d.ts` file to your project:
+Or alternatively, using the `jsx` style:
 
-```js
-declare module '*.vue';
+```js title="app.test.tsx"
+import { test, expect } from '@playwright/experimental-ct-vue';
+import App from './App.vue';
+
+test('should work', async ({ mount }) => {
+  const component = await mount(<App />);
+  await expect(component).toContainText('Learn Vue');
+});
 ```
 
+:::note
+If using TypeScript and Vue, ensure you add a `vue.d.ts` file to your project that contains `declare module '*.vue';`.
+:::
+
 </TabItem>
 
 <TabItem value="svelte">
 
-```js
+```js title="app.test.ts"
 import { test, expect } from '@playwright/experimental-ct-svelte';
 import App from './App.svelte';
 
-test.use({ viewport: { width: 500, height: 500 } });
-
 test('should work', async ({ mount }) => {
   const component = await mount(App);
-  await expect(component).toContainText('Vite + Svelte');
+  await expect(component).toContainText('Learn Svelte');
 });
 ```
 
@@ -167,12 +171,10 @@ test('should work', async ({ mount }) => {
 
 <TabItem value="solid">
 
-```js
+```js title="app.test.tsx"
 import { test, expect } from '@playwright/experimental-ct-solid';
 import App from './App';
 
-test.use({ viewport: { width: 500, height: 500 } });
-
 test('should work', async ({ mount }) => {
   const component = await mount(<App />);
   await expect(component).toContainText('Learn Solid');
@@ -261,7 +263,7 @@ export function InputMediaForTest(props: InputMediaForTestProps) {
 
 Then test the component via testing the story:
 
-```js title="input-media.test.spec.tsx"
+```js title="input-media.test.tsx"
 test('changes the image', async ({ mount }) => {
   let mediaSelected: string | null = null;
 
@@ -313,7 +315,9 @@ Provide props to a component when mounted.
 
 <TabItem value="react">
 
-```js
+```js title="component.test.tsx"
+import { test } from '@playwright/experimental-ct-react';
+
 test('props', async ({ mount }) => {
   const component = await mount(<Component msg="greetings" />);
 });
@@ -322,7 +326,9 @@ test('props', async ({ mount }) => {
 </TabItem>
 <TabItem value="solid">
 
-```js
+```js title="component.test.tsx"
+import { test } from '@playwright/experimental-ct-solid';
+
 test('props', async ({ mount }) => {
   const component = await mount(<Component msg="greetings" />);
 });
@@ -331,7 +337,9 @@ test('props', async ({ mount }) => {
 </TabItem>
 <TabItem value="svelte">
 
-```js
+```js title="component.test.ts"
+import { test } from '@playwright/experimental-ct-svelte';
+
 test('props', async ({ mount }) => {
   const component = await mount(Component, { props: { msg: 'greetings' } });
 });
@@ -340,11 +348,22 @@ test('props', async ({ mount }) => {
 </TabItem>
 <TabItem value="vue">
 
-```js
+```js title="component.test.ts"
+import { test } from '@playwright/experimental-ct-vue';
+
 test('props', async ({ mount }) => {
   const component = await mount(Component, { props: { msg: 'greetings' } });
 });
 ```
+Or alternatively, using the `jsx` style:
+
+```js title="component.test.tsx"
+import { test } from '@playwright/experimental-ct-vue';
+
+test('props', async ({ mount }) => {
+  const component = await mount(<Component msg="greetings" />);
+});
+```
 
 </TabItem>
 
@@ -366,7 +385,9 @@ Provide callbacks/events to a component when mounted.
 
 <TabItem value="react">
 
-```js
+```js title="component.test.tsx"
+import { test } from '@playwright/experimental-ct-react';
+
 test('callback', async ({ mount }) => {
   const component = await mount(<Component callback={() => {}} />);
 });
@@ -375,7 +396,9 @@ test('callback', async ({ mount }) => {
 </TabItem>
 <TabItem value="solid">
 
-```js
+```js title="component.test.tsx"
+import { test } from '@playwright/experimental-ct-solid';
+
 test('callback', async ({ mount }) => {
   const component = await mount(<Component callback={() => {}} />);
 });
@@ -384,7 +407,9 @@ test('callback', async ({ mount }) => {
 </TabItem>
 <TabItem value="svelte">
 
-```js
+```js title="component.test.ts"
+import { test } from '@playwright/experimental-ct-svelte';
+
 test('event', async ({ mount }) => {
   const component = await mount(Component, { on: { callback() {} } });
 });
@@ -393,12 +418,24 @@ test('event', async ({ mount }) => {
 </TabItem>
 <TabItem value="vue">
 
-```js
+```js title="component.test.ts"
+import { test } from '@playwright/experimental-ct-vue';
+
 test('event', async ({ mount }) => {
   const component = await mount(Component, { on: { callback() {} } });
 });
 ```
 
+Or alternatively, using the `jsx` style:
+
+```js title="component.test.tsx"
+import { test } from '@playwright/experimental-ct-vue';
+
+test('callback', async ({ mount }) => {
+  const component = await mount(<Component callback={() => {}} />);
+});
+```
+
 </TabItem>
 
 </Tabs>
@@ -419,7 +456,9 @@ Provide children/slots to a component when mounted.
 
 <TabItem value="react">
 
-```js
+```js title="component.test.tsx"
+import { test } from '@playwright/experimental-ct-react';
+
 test('children', async ({ mount }) => {
   const component = await mount(<Component>Child</Component>);
 });
@@ -428,7 +467,9 @@ test('children', async ({ mount }) => {
 </TabItem>
 <TabItem value="solid">
 
-```js
+```js title="component.test.tsx"
+import { test } from '@playwright/experimental-ct-solid';
+
 test('children', async ({ mount }) => {
   const component = await mount(<Component>Child</Component>);
 });
@@ -437,7 +478,9 @@ test('children', async ({ mount }) => {
 </TabItem>
 <TabItem value="svelte">
 
-```js
+```js title="component.test.ts"
+import { test } from '@playwright/experimental-ct-svelte';
+
 test('slot', async ({ mount }) => {
   const component = await mount(Component, { slots: { default: 'Slot' } });
 });
@@ -446,12 +489,24 @@ test('slot', async ({ mount }) => {
 </TabItem>
 <TabItem value="vue">
 
-```js
+```js title="component.test.ts"
+import { test } from '@playwright/experimental-ct-vue';
+
 test('slot', async ({ mount }) => {
   const component = await mount(Component, { slots: { default: 'Slot' } });
 });
 ```
 
+Or alternatively, using the `jsx` style:
+
+```js title="component.test.tsx"
+import { test } from '@playwright/experimental-ct-vue';
+
+test('children', async ({ mount }) => {
+  const component = await mount(<Component>Child</Component>);
+});
+```
+
 </TabItem>
 
 </Tabs>
@@ -485,7 +540,7 @@ You can use `beforeMount` and `afterMount` hooks to configure your app. This let
   });
   ```
 
-  ```js title="src/pages/ProductsPage.spec.tsx"
+  ```js title="src/pages/ProductsPage.test.tsx"
   import { test, expect } from '@playwright/experimental-ct-react';
   import type { HooksConfig } from '../playwright';
   import { ProductsPage } from './pages/ProductsPage';
@@ -516,7 +571,7 @@ You can use `beforeMount` and `afterMount` hooks to configure your app. This let
   });
   ```
 
-  ```js title="src/pages/ProductsPage.spec.tsx"
+  ```js title="src/pages/ProductsPage.test.tsx"
   import { test, expect } from '@playwright/experimental-ct-solid';
   import type { HooksConfig } from '../playwright';
   import { ProductsPage } from './pages/ProductsPage';
@@ -547,7 +602,7 @@ You can use `beforeMount` and `afterMount` hooks to configure your app. This let
   });
   ```
 
-  ```js title="src/pages/ProductsPage.spec.ts"
+  ```js title="src/pages/ProductsPage.test.ts"
   import { test, expect } from '@playwright/experimental-ct-vue';
   import type { HooksConfig } from '../playwright';
   import ProductsPage from './pages/ProductsPage.vue';
@@ -559,6 +614,20 @@ You can use `beforeMount` and `afterMount` hooks to configure your app. This let
     await expect(component.getByRole('link')).toHaveAttribute('href', '/products/42');
   });
   ```
+  Or alternatively, using the `jsx` style:
+
+  ```js title="src/pages/ProductsPage.test.tsx"
+  import { test, expect } from '@playwright/experimental-ct-vue';
+  import type { HooksConfig } from '../playwright';
+  import ProductsPage from './pages/ProductsPage.vue';
+
+  test('configure routing through hooks config', async ({ page, mount }) => {
+    const component = await mount<HooksConfig>(<ProductsPage />, {
+      hooksConfig: { enableRouting: true },
+    });
+    await expect(component.getByRole('link')).toHaveAttribute('href', '/products/42');
+  });
+  ```
 
   </TabItem>
 
@@ -581,7 +650,7 @@ You can use `beforeMount` and `afterMount` hooks to configure your app. This let
   });
   ```
 
-  ```js title="src/pages/ProductsPage.spec.ts"
+  ```js title="src/pages/ProductsPage.test.ts"
   import { test, expect } from '@playwright/experimental-ct-vue2';
   import type { HooksConfig } from '../playwright';
   import ProductsPage from './pages/ProductsPage.vue';
@@ -594,6 +663,21 @@ You can use `beforeMount` and `afterMount` hooks to configure your app. This let
   });
   ```
 
+  Or alternatively, using the `jsx` style:
+
+  ```js title="src/pages/ProductsPage.test.tsx"
+  import { test, expect } from '@playwright/experimental-ct-vue2';
+  import type { HooksConfig } from '../playwright';
+  import ProductsPage from './pages/ProductsPage.vue';
+
+  test('configure routing through hooks config', async ({ page, mount }) => {
+    const component = await mount<HooksConfig>(<ProductsPage />, {
+      hooksConfig: { enableRouting: true },
+    });
+    await expect(component.getByRole('link')).toHaveAttribute('href', '/products/42');
+  });
+  ```
+
   </TabItem>
 
 </Tabs>
@@ -614,7 +698,9 @@ Unmount the mounted component from the DOM. This is useful for testing the compo
 
 <TabItem value="react">
 
-```js
+```js title="component.test.tsx"
+import { test } from '@playwright/experimental-ct-react';
+
 test('unmount', async ({ mount }) => {
   const component = await mount(<Component/>);
   await component.unmount();
@@ -624,7 +710,9 @@ test('unmount', async ({ mount }) => {
 </TabItem>
 <TabItem value="solid">
 
-```js
+```js title="component.test.tsx"
+import { test } from '@playwright/experimental-ct-solid';
+
 test('unmount', async ({ mount }) => {
   const component = await mount(<Component/>);
   await component.unmount();
@@ -634,7 +722,9 @@ test('unmount', async ({ mount }) => {
 </TabItem>
 <TabItem value="svelte">
 
-```js
+```js title="component.test.ts"
+import { test } from '@playwright/experimental-ct-svelte';
+
 test('unmount', async ({ mount }) => {
   const component = await mount(Component);
   await component.unmount();
@@ -644,13 +734,25 @@ test('unmount', async ({ mount }) => {
 </TabItem>
 <TabItem value="vue">
 
-```js
+```js title="component.test.ts"
+import { test } from '@playwright/experimental-ct-vue';
+
 test('unmount', async ({ mount }) => {
   const component = await mount(Component);
   await component.unmount();
 });
 ```
 
+Or alternatively, using the `jsx` style:
+
+```js title="component.test.tsx"
+import { test } from '@playwright/experimental-ct-vue';
+
+test('unmount', async ({ mount }) => {
+  const component = await mount(<Component/>);
+  await component.unmount();
+});
+```
 </TabItem>
 
 </Tabs>
@@ -671,7 +773,9 @@ Update props, slots/children, and/or events/callbacks of a mounted component. Th
 
 <TabItem value="react">
 
-```js
+```js title="component.test.tsx"
+import { test } from '@playwright/experimental-ct-react';
+
 test('update', async ({ mount }) => {
   const component = await mount(<Component/>);
   await component.update(
@@ -683,7 +787,9 @@ test('update', async ({ mount }) => {
 </TabItem>
 <TabItem value="solid">
 
-```js
+```js title="component.test.tsx"
+import { test } from '@playwright/experimental-ct-solid';
+
 test('update', async ({ mount }) => {
   const component = await mount(<Component/>);
   await component.update(
@@ -695,7 +801,9 @@ test('update', async ({ mount }) => {
 </TabItem>
 <TabItem value="svelte">
 
-```js
+```js title="component.test.ts"
+import { test } from '@playwright/experimental-ct-svelte';
+
 test('update', async ({ mount }) => {
   const component = await mount(Component);
   await component.update({
@@ -709,7 +817,9 @@ test('update', async ({ mount }) => {
 </TabItem>
 <TabItem value="vue">
 
-```js
+```js title="component.test.ts"
+import { test } from '@playwright/experimental-ct-vue';
+
 test('update', async ({ mount }) => {
   const component = await mount(Component);
   await component.update({
@@ -720,6 +830,19 @@ test('update', async ({ mount }) => {
 });
 ```
 
+Or alternatively, using the `jsx` style:
+
+```js title="component.test.tsx"
+import { test } from '@playwright/experimental-ct-vue';
+
+test('update', async ({ mount }) => {
+  const component = await mount(<Component/>);
+  await component.update(
+      <Component msg="greetings" callback={() => {}}>Child</Component>
+  );
+});
+```
+
 </TabItem>
 
 </Tabs>
@@ -954,7 +1077,7 @@ beforeMount<HooksConfig>(async ({ hooksConfig }) => {
 });
 ```
 
-```js title="src/pinia.spec.ts"
+```js title="src/pinia.test.ts"
 import { test, expect } from '@playwright/experimental-ct-vue';
 import type { HooksConfig } from '../playwright';
 import Store from './Store.vue';