test for Link prop updating

packages/react/test-app/Pages/Links/PropUpdate.jsx

@@ -0,0 +1,15 @@
+import { Link } from '@inertiajs/react'
+import { useState } from 'react'
+
+export default () => {
+  const [href, setHref] = useState('/sleep')
+
+  return (
+    <div>
+      <button onClick={() => setHref('/something-else')}>Change URL</button>
+      <Link href={href} class="get">
+        The Link
+      </Link>
+    </div>
+  )
+}

packages/svelte/test-app/Pages/Links/PropUpdate.svelte

@@ -0,0 +1,16 @@
+<script>
+  import { Link } from '@inertiajs/svelte'
+
+  let href = '/sleep';
+
+  const changeUrl = () => {
+    href = '/something-else';
+  }
+</script>
+
+<div>
+  <button on:click={changeUrl}>Change URL</button>
+  <Link href={href} class="get">
+    The Link
+  </Link>
+</div>

packages/vue3/test-app/Pages/Links/PropUpdate.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { Link } from '@inertiajs/vue3'
+import { ref } from 'vue'
+
+const href = ref('/sleep')
+</script>
+
+<template>
+  <div>
+    <button @click.prevent="href = '/something-else'">Change URL</button>
+    <Link :href="href">The Link</Link>
+  </div>
+</template>

tests/app/server.js

@@ -72,6 +72,7 @@ app.get('/links/headers/version', (req, res) =>
   inertia.render(req, res, { component: 'Links/Headers', version: 'example-version-header' }),
 )
 app.get('/links/data-loading', (req, res) => inertia.render(req, res, { component: 'Links/DataLoading' }))
+app.get('/links/prop-update', (req, res) => inertia.render(req, res, { component: 'Links/PropUpdate' }))
 
 app.get('/visits/partial-reloads', (req, res) =>
   inertia.render(req, res, {
@@ -311,7 +312,7 @@ app.get('/deferred-props/page-2', (req, res) => {
 })
 
 app.get('/svelte/props-and-page-store', (req, res) =>
-  inertia.render(req, res, { component: 'Svelte/PropsAndPageStore', props: { foo: req.query.foo || 'default' }}),
+  inertia.render(req, res, { component: 'Svelte/PropsAndPageStore', props: { foo: req.query.foo || 'default' } }),
 )
 
 app.all('/sleep', (req, res) => setTimeout(() => res.send(''), 2000))

tests/links.spec.ts

@@ -754,3 +754,12 @@ test.describe('data-loading attribute', () => {
     await expect(link2).not.toHaveAttribute('data-loading')
   })
 })
+
+test('will update href if prop is updated', async ({ page }) => {
+  await page.goto('/links/prop-update')
+  const link = await page.getByRole('link', { name: 'The Link' })
+  const button = await page.getByRole('button', { name: 'Change URL' })
+  await expect(link).toHaveAttribute('href', /\/sleep$/)
+  await button.click()
+  await expect(link).toHaveAttribute('href', /\/something-else$/)
+})