Interview questions in Frontend Dev, page 15
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.
Token architecture for white-label multi-brand
A shared semantic schema, per-brand primitive and mapping overrides, a build step emitting one bundle per brand, components consume stable semantic names.
Differentiate client state from server state and their tools
This tests whether you recognize server state as async, remote, and cacheable versus local synchronous client state. A strong answer contrasts ownership and lifecycles, mapping Pinia to UI state and Vue Query to fetched data.
Create TerminalStatus from Status using Exclude or Extract
This tests conditional type mechanics and whitelist versus blacklist thinking. Extract selects matches by assignability; Exclude removes others. Prefer Extract when the desired set is explicit. Red flag: claiming they are equivalent or only knowing Exclude.
Modeling responsive design tokens
Model a token as a breakpoint-to-value map, transform into a base custom property redefined in media queries, components use one var per viewport.
Build a reactive data-fetching utility with Svelte stores
Tests store composition for async data fetching with caching and auto re-fetch. Strong answer: readable for lifecycle, derived's set callback for race-safe fetches, writable for private inputs. Red flag: exposed internals or missing cleanup.
Implement MyParameters<T> using conditional types and infer
Tests if you can extract parameter types with infer. A strong answer matches T against a callable signature, uses infer to bind parameters into a tuple, and defaults to never for non-functions. Red flag: using any or indexing without inference.
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.
Integrating design tokens with Tailwind CSS
Feed tokens into Tailwind's theme config (or v4 CSS theme) so utilities derive from one source; a parallel setup causes drift.
How do you define a basic Vue or Angular route?
Tests SPA routing conventions. Angular: Routes array in app.routes.ts with path and component, provided in bootstrap. Vue: routes array in src/router/index.js passed to createRouter. Red flag: omitting the outlet or placing config in a component.
Implement the built-in NonNullable<T> utility type from scratch
Tests conditional type distribution and union filtering. A strong answer uses distributive conditional types to map null and undefined to never while preserving other union members.
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.
Reusable Button with hover, focus, disabled
Use a real <button>, style :hover, a visible :focus-visible ring, and the [disabled] attribute that also blocks interaction.
Create a template link to a route without a full page reload
Tests SPA client-side routing knowledge. Strong answer: name RouterLink or routerLink, explain click interception and History API URL updates, and contrast with plain anchor tags.
Write a generic PickByValue<T, V> type
Tests conditional types and mapped-type key remapping. Great answer: K in keyof T as T[K] extends V ? K : never with value T[K]. Red flag: writing V extends T[K] instead, which reverses the assignability check and includes wrong keys.
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).
Designing a Card component API
Simple props for title and image, but children or slots for arbitrary content instead of a string prop, keeping it composable.
How do you create a dynamic route and access the id parameter?
This tests Vue Router dynamic segment syntax and param access. Define the path with a colon like /products/:id, then read via useRoute().params.id or $route.params.id. A red flag is expecting a remount on param changes or parsing window.location manually.
Implement recursive DeepReadonly<T> for nested objects and arrays
Tests recursive mapped types and conditional type narrowing. A strong answer uses a conditional to split arrays into ReadonlyArray, objects into readonly mapped types, and leaves primitives untouched.
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.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles