All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
4330 bites
Page 18
How do you unit test a custom React hook like useCounter?
This tests whether you know hooks must run inside a component and that renderHook provides that scaffold. A strong answer names renderHook and act, explains result.current access, and warns against calling hooks directly.
Testing a component that consumes React Context
Render inside the Context.Provider with a value, or omit it to exercise the default; use a custom render wrapper for reuse.
Difference between jest.fn, jest.spyOn, and jest.mock in React
Tests whether you distinguish Jest's three mocking scopes. Good answers: jest.fn for standalone callbacks; jest.spyOn to observe existing methods; jest.mock to swap entire modules. Red flag: using them interchangeably or saying spyOn replaces modules.
How do you balance unit, integration, and end-to-end tests in Next.js?
This tests allocation of test types across Next.js boundaries. Propose 70 percent unit tests for utilities, 20 percent integration tests for data fetching, and 10 percent end-to-end tests for critical flows, weighing cost and confidence.
Cypress auth strategies: UI login vs programmatic session
Tests your grasp of Cypress test isolation and speed tradeoffs. A strong answer contrasts slow UI login (ideal for the auth flow itself) against programmatic auth via cy.request or cy.session (fast setup for protected routes).
MSW vs mocking fetch or axios directly in Jest tests
MSW intercepts HTTP via Service Workers and Node, staying client-agnostic; direct fetch or axios mocks couple tests to specific libraries.
How do you create a /dashboard route in Next.js App Router?
Tests App Router file-system routing and the page.js convention. Good answer: create app/dashboard/page.js with a default export, note that only page.js creates an addressable route, and layouts do not.
What is layout.js and how does it differ from shared headers?
Layout.js persists across navigations without remounting; a shared header in each page.js remounts and loses state.
How do you create a /blog/[slug] route and access the slug value?
Use a [slug] directory with page.js; in App Router read the params prop in server components or useParams in client components.
How do loading.js and error.js integrate with Suspense and Error Boundaries?
Tests grasp of App Router conventions wrapping React primitives. loading.js suspends its segment for instant navigation feedback; error.js adds a client Error Boundary for child segment crashes. Wrong: assuming they are server-only or replace manual usage.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.