Front End Development Quality Control & Assurance 4 — Questions and Answers
Question 1: What is 'visual regression testing' and which tool is commonly used for it in front-end projects?
- Comparing bundle sizes before and after a PR; Webpack Bundle Analyzer
- Comparing pixel-level screenshots to detect unintended UI changes; Percy or Chromatic (Correct answer)
- Running Lighthouse audits on every commit; Lighthouse CI
- Checking ARIA roles programmatically; axe-core
Correct answer: Comparing pixel-level screenshots to detect unintended UI changes; Percy or Chromatic
Visual regression testing captures screenshots and diffs them to catch unintended layout or style changes; Percy and Chromatic are popular services.
Question 2: A team adds `husky` and `lint-staged` to their project. What workflow do these tools enable?
- Automatic deployment on merge to main
- Running linters and formatters only on staged files before each commit (Correct answer)
- Generating test coverage reports post-push
- Syncing environment variables across team machines
Correct answer: Running linters and formatters only on staged files before each commit
Husky sets up Git hooks and lint-staged runs configured tools (ESLint, Prettier) only on files staged for commit.
Question 3: What is the purpose of mocking `fetch` or `axios` in front-end unit tests?
- To increase real network throughput during tests
- To prevent tests from making actual HTTP requests and to control response data (Correct answer)
- To test the real API endpoint behavior
- To measure API latency under load
Correct answer: To prevent tests from making actual HTTP requests and to control response data
Mocking network calls makes tests deterministic, fast, and independent of backend availability.
Question 4: In Storybook, what is the purpose of 'interaction tests' (using `@storybook/test`)?
- Testing Storybook's build performance
- Simulating and asserting user interactions within a story to verify component behavior (Correct answer)
- Generating API documentation from stories
- Running TypeScript type checks on story args
Correct answer: Simulating and asserting user interactions within a story to verify component behavior
Storybook interaction tests use Testing Library and userEvent inside stories to verify component behavior in the browser environment.
Question 5: What does `jest.spyOn()` do differently from `jest.fn()`?
- jest.spyOn creates a completely new function; jest.fn wraps an existing method
- jest.spyOn wraps an existing object method while preserving the original implementation by default; jest.fn creates a standalone mock (Correct answer)
- jest.spyOn only works with class methods; jest.fn works everywhere
- They are identical in behavior
Correct answer: jest.spyOn wraps an existing object method while preserving the original implementation by default; jest.fn creates a standalone mock
jest.spyOn attaches a spy to an existing method, allowing you to track calls while optionally keeping or replacing the real implementation.
Question 6: Which HTTP status code should a properly configured CI health-check endpoint return to indicate a passing state?
- 204 No Content
- 200 OK (Correct answer)
- 302 Found
- 404 Not Found
Correct answer: 200 OK
A 200 OK response signals that the service is healthy; CI systems and load balancers use non-200 responses to detect failures.
Question 7: What is 'contract testing' in a micro-frontend or API-driven front-end architecture?
- Legal agreements between teams about code ownership
- Verifying that the API responses match the shape the front end expects, independent of the real API (Correct answer)
- Testing all front-end components against every API version simultaneously
- Enforcing TypeScript interfaces at runtime
Correct answer: Verifying that the API responses match the shape the front end expects, independent of the real API
Contract testing (e.g., Pact) validates that provider API responses conform to the consumer's expectations without requiring both systems to be live simultaneously.
Front End Development Quality Control & Assurance 4
What is 'visual regression testing' and which tool is commonly used for it in front-end projects?