Update next/link default legacyBehavior (#42623)

## Bug Fixes #42621 - [x] Related issues linked using `fixes #number` - [x] Integration tests added - [ ] Errors have a helpful link attached, see `contributing.md` Co-authored-by: JJ Kasper <[email protected]>
vercel · Dec 1, 2022 · 30c9627 · 30c9627
1 parent 1bb0596
commit 30c9627
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 2 deletions.
diff --git a/packages/next/client/link.tsx b/packages/next/client/link.tsx
@@ -375,7 +375,8 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkPropsReal>(
       onClick,
       onMouseEnter: onMouseEnterProp,
       onTouchStart: onTouchStartProp,
-      legacyBehavior = Boolean(process.env.__NEXT_NEW_LINK_BEHAVIOR) !== true,
+      // @ts-expect-error this is inlined as a literal boolean not a string
+      legacyBehavior = process.env.__NEXT_NEW_LINK_BEHAVIOR === false,
       ...restProps
     } = props
 

diff --git a/test/integration/link-with-multiple-child/test/index.test.js b/test/integration/link-with-multiple-child/test/index.test.js
@@ -0,0 +1,30 @@
+/**
+ * @jest-environment jsdom
+ */
+import { render, screen } from '@testing-library/react'
+import Link from 'next/link'
+
+test('single child', () => {
+  render(<Link href="https://nextjs.org/blog/next-13">Hello world</Link>)
+  expect(screen.getByRole('link')).not.toBeNull()
+})
+
+test('multiple child with default legacyBehavior', () => {
+  render(
+    <Link href="https://nextjs.org/blog/next-13">
+      <span>Hello world</span>
+      <span>!</span>
+    </Link>
+  )
+  expect(screen.getByRole('link')).not.toBeNull()
+})
+
+test('multiple child with forced legacyBehavior=false', () => {
+  render(
+    <Link href="https://nextjs.org/blog/next-13" legacyBehavior={false}>
+      <span>Hello world</span>
+      <span>!</span>
+    </Link>
+  )
+  expect(screen.getByRole('link')).not.toBeNull()
+})
diff --git a/test/unit/link-rendering.test.ts b/test/unit/link-rendering.test.ts
@@ -10,7 +10,7 @@ describe('Link rendering', () => {
       {
         href: '/my-path',
       },
-      React.createElement('a', {}, 'to another page')
+      'to another page'
     )
     const html = ReactDOM.renderToString(element)
     expect(html).toMatchInlineSnapshot(