Question 1. What are the types of testing, and why are they used?
Unit Test
•
Tests the smallest unit of code (function, component).
•
Fast, easy to debug.
•
Example: Verify that a React component renders correctly with given props.
Integration Test
•
Ensures multiple modules work correctly together.
•
Example: “Login form → API call → state update → UI reflects change.”
E2E Test (End-to-End)
•
Simulates real user flows across the entire app.
•
Uses tools like Cypress, Playwright, Selenium.
•
Example: User can register → login → create a post successfully.
Tests provide confidence, catch regressions, and improve reliability.Question 2. What is React Testing Library (RTL)?
•
A testing library focused on testing apps the way users interact with them.
•
Avoids testing implementation details.
How it Works
1.
render() renders the component in a virtual DOM.
2.
Query elements with getByText, getByRole, getByLabelText, etc.
3.
Trigger interactions with fireEvent or userEvent.
4.
Assert outcomes with Jest matchers like expect(...).toBeInTheDocument().
Instead of selecting by className, you query by visible text.Question 3. What is Mocking in testing?
•
Creating fake versions of external dependencies (API, DB, network calls).
•
Purpose: Make tests fast, reliable, and deterministic.
Why Needed
•
Remove external dependencies (API down → tests unaffected).
•
Ensure consistent results for network, random values, or dates.
Question 4. What is Context API, why use it, and how is it different from Redux?
Context API
•
Built-in React tool for global state sharing.
•
Solves prop drilling problem.
•
Weak granularity: when value changes, all consumers re-render.
When to Use
•
Infrequently changing state: theme, language, authentication.
Redux Difference
•
Redux allows fine-grained subscription: useSelector re-renders only if the subscribed slice changes.
•
Context API triggers broader re-renders.
Context = simple, Redux = efficient for frequently changing state.Question 5. How can you optimize CSS performance?
1.
Remove unused CSS.
2.
Avoid deeply nested selectors (div div ul li).
3.
Minimize reflows (layout changes).
4.
Batch DOM writes/reads.
5.
Use GPU-friendly properties (transform, opacity).
Question 6. Explain Event Bubbling, Capturing, and Delegation.
Capturing Phase
•
Event flows from root → target.
•
Use { capture: true } to listen here.
Bubbling Phase
•
Event flows from target → root (default).
Event Delegation
•
Attach one listener to a parent instead of multiple children.
•
Improves performance and reduces memory usage.
Question 7. What is Webpack’s bundling process?
1.
Define entry point (index.js).
2.
Build dependency graph.
3.
Apply loaders (e.g., Babel, CSS-loader).
4.
Apply plugins (minification, env variables).
5.
Output a single optimized bundle (bundle.js).
Question 8. What is immutability, and how is it applied in React?
•
Immutability = don’t mutate arrays/objects, return new copies.
•
React detects state changes by reference equality.
Example
•
state.list.push(item)•
setList([...list, item])Question 9. Explain this binding rules in JavaScript.
1.
Default Binding → global object (window / undefined in strict mode).
2.
Implicit Binding → obj.method() → this = obj.
3.
Explicit Binding → call, apply, bind.
4.
new Binding → new creates object, binds this.
5.
Arrow Functions → inherit from surrounding lexical scope.
Question 10. What are semantic HTML tags, and why are they important?
•
Tags that convey meaning: <header>, <main>, <article>, <footer>.
•
Benefits:
◦
Accessibility (assistive tech interprets better).
◦
SEO (search engines understand structure).
◦
Maintainability (self-describing markup).
Question 11. How to improve accessibility in HTML?
•
Use semantic elements.
•
Proper heading hierarchy (h1 > h2 > h3).
•
aria-* attributes when necessary.
•
Descriptive alt for images.
•
Landmark roles (<nav>, <main>).
•
Associate <label> with inputs.
Question 12. What’s the role of meta tags in SEO?
•
Provide metadata about the page.
Examples
•
<meta name="description" content="..."> → search snippets.
•
<meta name="viewport" content="width=device-width, initial-scale=1.0"> → responsive design.
•
Open Graph tags → social sharing previews.
Question 13. Difference between GET and POST in HTML forms?
•
GET
◦
Data appended to URL.
◦
Visible, cacheable.
◦
For non-sensitive or bookmarkable data.
•
POST
◦
Data sent in body.
◦
Not visible in URL.
◦
For sensitive or large payloads.
Question 14. What is CSS specificity and how is it calculated?
•
Determines which CSS rule overrides another.
Specificity order
1.
Inline styles → highest.
2.
IDs.
3.
Classes, attributes, pseudo-classes.
4.
Element selectors, pseudo-elements.
5.
If equal → later rule wins.
6.
!important overrides all.
Question 15. Difference between Flexbox and Grid?
•
Flexbox → One-dimensional (row or column). Best for aligning items in a line.
•
Grid → Two-dimensional (rows and columns). Best for page layouts or complex grids.
