-
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(gatsby): don't remount matchPath pages #10261
Conversation
@@ -20,7 +20,7 @@ class PageRenderer extends React.Component { | |||
replacementElement || | |||
createElement(this.props.pageResources.component, { | |||
...props, | |||
key: this.props.location.pathname, | |||
key: this.props.pageResources.page.path, |
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.
actual fix
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.
🎉
.waitForAPI(`onRouteUpdate`) | ||
|
||
cy.window().then(win => { | ||
cy.wrap(win.___PageComponentLifecycleCallsLog).snapshot() |
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.
using snapshot testing, lifecycle calls log is quite verbose and might be hard to read - it might make sense to not use snapshots here and use more programmatic assertions
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.
One way to test this would be count renders in local state and add that to the DOM and assert against it
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.
It was kind of already doing that, but I did some refactoring to be more readable, so now I have:
// we expect just 1 `componentDidMount` call, when navigating inside matchPath
cy.lifecycleCallCount(`componentDidMount`).should(`equal`, 1)
cy.lifecycleCallCount(`render`).should(`equal`, 3)
for story like this:
- load
/client-only-paths
- navigate to
/client-only-paths/profile
- navigate to
/client-only-paths/dashboard
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.
Looks good to me! Nice job!
<Link to="/long-page/" data-testid="long-page"> | ||
To long page | ||
</Link> | ||
<pre data-testid="dom-marker">{pageContext.DOMMarker || `index`}</pre> |
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.
This is pretty slick. Nice work!
Thanks for the turnaround on this one! Was pulling my hair out on the undefined.fm's upcoming job board on this. You all rock! |
* master: (1595 commits) chore: update link for react-gatsby-firebase-authentication (gatsbyjs#10314) fix(www): Awesome Gatsby sidebar link (gatsbyjs#10313) Add thijs koerselman to creators list (gatsbyjs#10303) chore(release): Publish fix(gatsby-plugin-emotion): allow for React.Fragment shorthand syntax (gatsbyjs#10291) feat(www): Update starter cards (gatsbyjs#10258) Update index.md (gatsbyjs#10307) Update index.md (gatsbyjs#10306) Add thijs koerselman portfolio to sites list (gatsbyjs#10304) chore(release): Publish fix(gatsby): don't remount matchPath pages (gatsbyjs#10261) chore(release): Publish feat(gatsby-source-contentful): enable RichText for all users (gatsbyjs#10301) docs(tutorial): update 404 screenshot (gatsbyjs#10295) feat(gatsby-plugin-typescript): allow specifying babel preset options (gatsbyjs#10248) docs(gatsby-plugin-sass): fix typo in docs (gatsbyjs#10292) fix(ci): actually only run tests on non-docs changes (gatsbyjs#10287) fix(blog): rename for correct date in link (gatsbyjs#10290) Adds a more descriptive link purpose (gatsbyjs#9266) fix(www): comment out down showcase site ...
* fix: don't remount page component when navigating inside matchPath * test: add tests to ensure remounting behaviour stays consistent and avoid future regressions * switch from snapshot testing to more descriptive assert * abstract lifecycleCallCount, so tests are more readable
Actual fix is one line change - most of this PR is cypress testing to catch any behaviour changes in future PRs
fixes #10227