All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
8664 bites
Page 36
What are Next.js Route Groups and a practical use case?
Tests App Router conventions organizing routes without changing URLs. A good answer names parenthesized folders like (shop) removed from the path, cites multiple layouts per section, and keeps URLs clean. Red flag: confusing them with dynamic [slug] segments.
Test Like a User: The React Testing Library Philosophy
React Testing Library's philosophy is to test components the way a user interacts with them, not by their internal implementation. This ensures refactors don't break tests. The footgun is querying by implementation details instead of what a user actually sees.
Recommended App Router pattern to fetch shared data once for child routes
Tests App Router layout constraints and request deduplication. Answer: wrap the user fetch in React cache, call it from layout and child Server Components, and let Next.js deduplicate. Red flag: layout prop drilling or getServerSideProps.
Jest: The 'Batteries-Included' JavaScript Test Runner
Jest is a "batteries-included" JavaScript testing framework, bundling a runner, assertions, and mocking tools. It's a default for React apps but works for any JS project. The footgun is thinking it's only for React; it's a general-purpose tool.
How do nested layouts work in the App Router?
Tests nested layout composition and state persistence in the App Router. Good answers explain root wraps dashboard wraps page, dashboard state survives child navigation, and only the page segment rerenders.
React Testing Library Queries: Find Elements Like a User
React Testing Library queries find elements by simulating how users see your UI, not by implementation details. Prioritize user-facing attributes like getByRole or getByLabelText.
What are Parallel and Intercepting Routes? Describe a photo gallery modal scenario.
This tests App Router layout composition and URL-state. A strong answer defines @modal slots and intercepting (.) routes, explaining modal overlays that preserve page context. Red flag is proposing global state or portals over file-system conventions.
Jest Matchers: Asserting Values in Your Tests
Jest matchers are assertion functions that check if a value meets a condition. You use them with expect() to verify function outputs, object properties, or promise states.
Server Component fetch vs. client-side SWR or React Query
Tests App Router cache boundaries and hydration costs. Strong answers weigh server TTFB and bundle savings against client interactivity, mutations, and background refetching. Red flag: defaulting to client fetching everywhere and ignoring waterfalls.
user-event vs. fireEvent: Testing Real User Interactions
user-event tests how users actually interact with your UI, not just isolated DOM events. It simulates a full action sequence, like a click firing pointerdown, mousedown, and click. Use it to test component behavior from a user's perspective.
Key difference between Server and Client Components in Next.js?
Tests App Router rendering boundaries. A strong answer contrasts server-only execution against browser interactivity, choosing Client Components only for state, effects, or events.
Jest Mocks: Spies for Your Functions
A Jest mock is a spy that watches a function, recording calls without running the original logic. This lets you isolate code under test, verify interactions like callbacks, and control return values. The footgun is assuming mocks run real logic—they don't.
How do you fetch data for SSG in a Next.js Server Component?
This checks if you know Server Components fetch at build time for static routes. A strong answer uses native fetch in an async Server Component, caches into static HTML, and shows a page.js snippet. A red flag is mentioning getStaticProps or useEffect.
Handling Asynchronous UI with Testing Library
Your test shouldn't race your UI. Use async helpers to wait for elements to appear, disappear, or change after an event. This is crucial for testing components that fetch data. The footgun is forgetting await on findBy or waitFor calls.
How do you implement SSR in Next.js App Router and configure fetch?
Tests App Router static defaults and fetch-driven dynamic rendering. Strong answer: async Server Component awaits fetch with cache no-store or next revalidate zero to force request-time rendering. Red flag: citing getServerSideProps or useEffect data fetching.
Snapshot Testing: Lock In Your UI's Rendered Output
Snapshot testing catches unintended UI changes by comparing a component's rendered output to a saved 'golden' version. Use it to ensure UIs don't break during refactors. The biggest footgun is blindly updating snapshots, which can approve bugs as correct.
Describe an ideal ISR scenario and configure it in a Server Component
This tests stale-while-revalidate tradeoffs. A strong answer picks a semi-static scenario like a product catalog, then covers the fetch revalidate option or segment-level config. A red flag is confusing ISR with SSR or adding useEffect to a Server Component.
Cypress for End-to-End Testing in Next.js
Cypress is a framework for end-to-end testing of Next.js applications. It's presented as a primary option in the official docs, alongside tools like Playwright and Vitest, for automating tests that simulate real user interactions in a browser.
How does Server Component fetching differ from getStaticProps and getServerSideProps?
This tests shifting from page-level fetching to component-level async fetches. Strong answers note async await inside components, zero prop drilling, streaming, and mixed static or dynamic data. Red flag: calling them a simple rename of getServerSideProps.
MSW: Mock APIs at the Network Layer
Mock Service Worker intercepts API calls at the network level using a Service Worker, so your app makes real requests. Use it for consistent mocking in development, testing, and Storybook.