Front End Development Quality Control & Assurance 4

Question 1

What is 'visual regression testing' and which tool is commonly used for it in front-end projects?

Accepted Answer

Comparing pixel-level screenshots to detect unintended UI changes; Percy or Chromatic

Answer

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?

Accepted Answer

Running linters and formatters only on staged files before each commit

Answer

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?

Accepted Answer

To prevent tests from making actual HTTP requests and to control response data

Answer

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`)?

Accepted Answer

Simulating and asserting user interactions within a story to verify component behavior

Answer

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()`?

Accepted Answer

jest.spyOn wraps an existing object method while preserving the original implementation by default; jest.fn creates a standalone mock

Answer

jest.spyOn attaches a spy to an existing method, allowing you to track calls while optionally keeping or replacing the real implementation.

Front End Development Practice Test