-
-
Notifications
You must be signed in to change notification settings - Fork 10.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix React SRR useLayoutEffect console.error when using CompatRouter #9820
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -20,6 +20,7 @@ | |
- bobziroll | ||
- BrianT1414 | ||
- brockross | ||
- brookslybrand | ||
- brophdawg11 | ||
- btav | ||
- bvangraafeiland | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
/** | ||
* @jest-environment node | ||
*/ | ||
import * as React from "react"; | ||
import * as ReactDOMServer from "react-dom/server"; | ||
import { act } from "react-dom/test-utils"; | ||
import { CompatRouter, Routes } from "../index"; | ||
|
||
// Have to mock react-router-dom to have a comparable API to v5, otherwise it will | ||
// be using v6's API and fail | ||
jest.mock("react-router-dom", () => ({ | ||
useHistory: () => ({ location: "/" }), | ||
})); | ||
Comment on lines
+9
to
+13
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Don't super love having to mock this out, but without this mock |
||
|
||
describe("CompatRouter", () => { | ||
it("should not warn about useLayoutEffect when server side rendering", () => { | ||
const consoleErrorSpy = jest.spyOn(console, "error"); | ||
|
||
act(() => { | ||
ReactDOMServer.renderToStaticMarkup( | ||
<CompatRouter> | ||
<Routes /> | ||
</CompatRouter> | ||
); | ||
}); | ||
|
||
expect(consoleErrorSpy).toHaveBeenCalledTimes(0); | ||
consoleErrorSpy.mockRestore(); | ||
}); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -23,14 +23,25 @@ export function CompatRoute(props: any) { | |
); | ||
} | ||
|
||
// Copied with 💜 from https://github.com/bvaughn/react-resizable-panels/blob/main/packages/react-resizable-panels/src/hooks/useIsomorphicEffect.ts | ||
const canUseEffectHooks = !!( | ||
typeof window !== "undefined" && | ||
typeof window.document !== "undefined" && | ||
typeof window.document.createElement !== "undefined" | ||
); | ||
|
||
const useIsomorphicLayoutEffect = canUseEffectHooks | ||
? React.useLayoutEffect | ||
: () => {}; | ||
|
||
Comment on lines
+26
to
+36
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. In the words of @ryanflorence
|
||
export function CompatRouter({ children }: { children: React.ReactNode }) { | ||
let history = useHistory(); | ||
let [state, setState] = React.useState(() => ({ | ||
location: history.location, | ||
action: history.action, | ||
})); | ||
|
||
React.useLayoutEffect(() => { | ||
useIsomorphicLayoutEffect(() => { | ||
history.listen((location: Location, action: Action) => | ||
setState({ location, action }) | ||
); | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If there is a better/preferred way to set the environment in jest, please let me know 🙂. Without this comment this test will have a false-positive, since it assumes we are in a browser environment where this isn't a problem.