fix(test): use forwardRef in gatsby Link mock to silence MUI ref warnings#442
Merged
Merged
Conversation
…ings MUI Link requires `component` to be a ref-capable element type. The Jest mock for gatsby's Link was a plain function that also destructured `ref` from props, triggering PropTypes and ref console warnings when rendering Footer. Production gatsby Link already uses forwardRef; only the mock was wrong. Adds a Footer regression test asserting the links render and the warnings no longer fire. Closes #441 Co-authored-by: Cursor <cursoragent@cursor.com>
There was a problem hiding this comment.
Pull request overview
This PR fixes noisy MUI ref/PropTypes warnings in tests by updating the Jest Gatsby Link mock to be ref-capable (via React.forwardRef) and adds a regression test around Footer links to ensure the warnings don’t reappear.
Changes:
- Update
__mocks__/gatsby.jsto exportLinkas aReact.forwardRefcomponent (instead of a plain mocked function) and stop treatingrefas a normal prop. - Add a
Footerregression test that asserts key footer links render with the expectedhrefvalues and that ref-related console warnings are not emitted.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
src/components/Footer/index.test.js |
Adds RTL-based regression coverage for footer Gatsby links and absence of ref warnings. |
__mocks__/gatsby.js |
Replaces the Gatsby Link test mock with a forwardRef implementation to match production behavior and satisfy MUI ref expectations. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+26
to
+47
| const consoleError = jest | ||
| .spyOn(console, "error") | ||
| .mockImplementation(() => {}) | ||
|
|
||
| const { getByText } = render(<Footer siteTitle="Test site title" />) | ||
|
|
||
| expect(getByText("Ajuda").closest("a")).toHaveAttribute("href", "/ajuda") | ||
| expect(getByText("Privacidade").closest("a")).toHaveAttribute( | ||
| "href", | ||
| "/privacidade" | ||
| ) | ||
| expect(getByText("Termos de uso").closest("a")).toHaveAttribute( | ||
| "href", | ||
| "/termos" | ||
| ) | ||
|
|
||
| const linkRefWarnings = consoleError.mock.calls.filter( | ||
| isFooterLinkRefWarning | ||
| ) | ||
| expect(linkRefWarnings).toHaveLength(0) | ||
| consoleError.mockRestore() | ||
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
__mocks__/gatsby.jsLinkas aReact.forwardRefcomponent, matching production GatsbyLink, and stops destructuringreffrom props.Footerregression test asserting the Ajuda / Privacidade / Termos links render with the righthrefand that the MUIcomponent/refconsole warnings no longer fire.Closes #441
Test plan
npm test— 28 suites green, snapshots unchangedMade with Cursor