diff --git a/test/development/app-dir/hmr-parallel-routes/app/@bar/page.tsx b/test/development/app-dir/hmr-parallel-routes/app/@bar/page.tsx
new file mode 100644
index 0000000000..4289beab2d
--- /dev/null
+++ b/test/development/app-dir/hmr-parallel-routes/app/@bar/page.tsx
@@ -0,0 +1,3 @@
+export default function BarPage() {
+ return Bar Page
+}
diff --git a/test/development/app-dir/hmr-parallel-routes/app/@foo/page.tsx b/test/development/app-dir/hmr-parallel-routes/app/@foo/page.tsx
new file mode 100644
index 0000000000..621a5e5618
--- /dev/null
+++ b/test/development/app-dir/hmr-parallel-routes/app/@foo/page.tsx
@@ -0,0 +1,3 @@
+export default function FooPage() {
+ return Foo Page
+}
diff --git a/test/development/app-dir/hmr-parallel-routes/app/layout.tsx b/test/development/app-dir/hmr-parallel-routes/app/layout.tsx
new file mode 100644
index 0000000000..199ec46b93
--- /dev/null
+++ b/test/development/app-dir/hmr-parallel-routes/app/layout.tsx
@@ -0,0 +1,14 @@
+import { ReactNode } from 'react'
+
+function Layout(props: { foo: ReactNode; bar: ReactNode }) {
+ return (
+
+
+ {props.foo}
+ {props.bar}
+
+
+ )
+}
+
+export default Layout
diff --git a/test/development/app-dir/hmr-parallel-routes/hmr-parallel-routes.test.ts b/test/development/app-dir/hmr-parallel-routes/hmr-parallel-routes.test.ts
new file mode 100644
index 0000000000..d6bb67f768
--- /dev/null
+++ b/test/development/app-dir/hmr-parallel-routes/hmr-parallel-routes.test.ts
@@ -0,0 +1,30 @@
+import { nextTestSetup } from 'e2e-utils'
+import { assertNoRedbox } from 'next-test-utils'
+
+describe('hmr-parallel-routes', () => {
+ const { next } = nextTestSetup({
+ files: __dirname,
+ })
+
+ it('should update parallel routes via HMR', async () => {
+ const browser = await next.browser('/')
+ expect(await browser.elementByCss('#bar').text()).toBe('Bar Page')
+ expect(await browser.elementByCss('#foo').text()).toBe('Foo Page')
+
+ await next.patchFile('app/@bar/page.tsx', (content) =>
+ content.replace('Bar Page', 'Bar Page Updated')
+ )
+
+ await assertNoRedbox(browser)
+
+ expect(await browser.elementByCss('#bar').text()).toBe('Bar Page Updated')
+
+ await next.patchFile('app/@foo/page.tsx', (content) =>
+ content.replace('Foo Page', 'Foo Page Updated')
+ )
+
+ await assertNoRedbox(browser)
+
+ expect(await browser.elementByCss('#foo').text()).toBe('Foo Page Updated')
+ })
+})
diff --git a/test/development/app-dir/hmr-parallel-routes/next.config.js b/test/development/app-dir/hmr-parallel-routes/next.config.js
new file mode 100644
index 0000000000..807126e4cf
--- /dev/null
+++ b/test/development/app-dir/hmr-parallel-routes/next.config.js
@@ -0,0 +1,6 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {}
+
+module.exports = nextConfig