test(frontend): comprehensive snapshot tests for all screens - #35
Conversation
The frontend had behavioral tests but no snapshot coverage. Add Jest + React Testing Library snapshot tests for every screen (18): Home, Shop, ProductDetails, Cart, Checkout, OrderSuccess, OrderTracking, Login, Register, ForgotPassword, ResetPassword, About, Privacy, ShippingReturns, Support, NotFoundPage, plus the NavigationBar and Footer. Each test renders the screen inside a MemoryRouter with its dependencies mocked (apiClient, ProductCard, carousel, notifier) and asserts the rendered markup with toMatchSnapshot(), so unintended UI changes surface as a diff. Tests live in src/tests/snapshots/. Harness (jest.setup.js): add jsdom polyfills (matchMedia, scrollTo, scrollIntoView, Resize/IntersectionObserver) and neutralize autoFocus so focus-sensitive markup is stable across environments. Determinism (passes identically on local + CI regardless of when/where): - apiClient mocked as pending so data screens render their deterministic loading/initial state offline. - Home: banner images, ProductCard, and the carousel are stubbed. - Footer: Date frozen (renders the current year). Verified: frontend suite 25 suites / 45 tests / 18 snapshots green in CI mode (the existing 7 behavioral suites still pass), and the snapshot suites pass against the committed baselines under UTC, Pacific/Kiritimati (UTC+14), and Pacific/Pago_Pago (UTC-11). No new dependencies. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
✅ Deploy Preview for mern-stack-ecommerce-website ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces comprehensive snapshot tests for all screens and key components under src/tests/snapshots/, along with their baseline snapshot files, and updates the README.md with instructions on running and updating these tests. Additionally, jest.setup.js is updated with several jsdom polyfills and stubs to prevent rendering crashes during testing. The reviewer feedback highlights two main areas for improvement: first, globally overriding HTMLElement.prototype.focus with a no-op in jest.setup.js should be avoided to prevent test pollution, suggesting local mocking instead; second, manually monkey-patching the global Date constructor in Footer.snapshot.test.js should be replaced with Jest's native system time mocking utilities (jest.useFakeTimers and jest.setSystemTime).
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| // autoFocus toggles MUI focus classes, and jsdom applies it inconsistently | ||
| // across environments (focuses locally but not on CI), which would make | ||
| // focus-sensitive snapshots flaky. Neutralize focus so the rendered markup | ||
| // is the unfocused state everywhere. | ||
| window.HTMLElement.prototype.focus = () => {}; |
There was a problem hiding this comment.
Globally overriding HTMLElement.prototype.focus with a no-op in jest.setup.js can cause test pollution and break other behavioral or accessibility tests that rely on focus tracking (e.g., asserting document.activeElement or testing form validation focus). Instead of mutating the global prototype for all tests, consider mocking focus locally within the specific snapshot tests that require it, or using a Jest spy that can be restored after each test.
| const RealDate = Date; | ||
| const FIXED_ISO = '2024-06-15T12:00:00.000Z'; | ||
|
|
||
| beforeAll(() => { | ||
| global.Date = class extends RealDate { | ||
| constructor(...args) { | ||
| super(...(args.length ? args : [FIXED_ISO])); | ||
| } | ||
| static now() { | ||
| return new RealDate(FIXED_ISO).getTime(); | ||
| } | ||
| }; | ||
| }); | ||
|
|
||
| afterAll(() => { | ||
| global.Date = RealDate; | ||
| }); |
There was a problem hiding this comment.
Monkey-patching the global Date constructor manually is an anti-pattern in Jest and can lead to flaky tests or unexpected side effects in other test suites running in the same environment. Instead, use Jest's built-in, safe system time mocking utilities (jest.useFakeTimers and jest.setSystemTime).
beforeAll(() => {
jest.useFakeTimers();
jest.setSystemTime(new Date('2024-06-15T12:00:00.000Z'));
});
afterAll(() => {
jest.useRealTimers();
});
hoangsonww
added
enhancement
hoangsonww
added
bug
github-project-automation
Bot
moved this from In review
to Done
in Fusion Electronics MERN Project
What
The frontend had behavioral tests but no snapshot coverage. This adds Jest + React Testing Library snapshot tests for all 18 screens:
Home, Shop, ProductDetails, Cart, Checkout, OrderSuccess, OrderTracking, Login, Register, ForgotPassword, ResetPassword, About, Privacy, ShippingReturns, Support, NotFoundPage — plus the NavigationBar and Footer.
Each test renders the screen inside a
MemoryRouterwith its dependencies mocked (apiClient,ProductCard, carousel, notifier) and asserts the rendered markup withtoMatchSnapshot(). Tests live insrc/tests/snapshots/.Harness
jest.setup.jsgains jsdom polyfills (matchMedia,scrollTo,scrollIntoView,Resize/IntersectionObserver) and a globalautoFocusneutralization (jsdom applies focus inconsistently across environments). No config or dependency changes.Determinism — passes identically on local + CI regardless of when/where
apiClientmocked as pending → data screens render their deterministic loading/initial state offline.ProductCard, and the carousel stubbed.Datefrozen (renders the current year).Verification
Snapshot suites verified against the committed baselines under UTC, Pacific/Kiritimati (UTC+14), and Pacific/Pago_Pago (UTC-11) — all pass. The 7 existing behavioral suites still pass. Files are Prettier-clean per
.prettierrc. No new dependencies.Docs: the README "Frontend Tests" section now documents the snapshot suites and how to run/update them.
🤖 Generated with Claude Code