Front End Development Quality Control & Assurance 2 — Questions and Answers
Question 1: Which testing approach verifies that individual UI components render correctly in isolation without requiring a full browser environment?
- End-to-end testing
- Component unit testing (Correct answer)
- Integration testing
- Smoke testing
Correct answer: Component unit testing
Component unit testing (e.g., with Jest + React Testing Library) verifies components in isolation without a real browser.
Question 2: What does the 'coverage threshold' setting in a Jest configuration enforce?
- Maximum file size allowed in the build
- Minimum percentage of code that must be covered by tests (Correct answer)
- Number of test workers to spawn
- Time limit for each test suite
Correct answer: Minimum percentage of code that must be covered by tests
Coverage thresholds in Jest fail the test run if the percentage of covered lines, branches, or functions falls below the defined minimum.
Question 3: A Cypress test selector uses `cy.get('[data-testid="submit-btn"]')` instead of `cy.get('.btn-primary')`. What is the primary benefit?
- Faster test execution speed
- Reduced test brittleness when styles change (Correct answer)
- Better browser compatibility
- Smaller bundle size
Correct answer: Reduced test brittleness when styles change
Data-testid attributes are decoupled from styling classes, so style refactors don't break selectors.
Question 4: What is a 'snapshot test' in the context of React component testing?
- A performance benchmark capturing render time
- A test that serializes rendered output and compares it to a stored baseline (Correct answer)
- A visual screenshot comparison using Playwright
- A test that mocks network snapshots
Correct answer: A test that serializes rendered output and compares it to a stored baseline
Snapshot tests serialize a component's rendered output to a file and fail if the output changes unexpectedly.
Question 5: Which accessibility testing tool can be integrated directly into Jest to catch WCAG violations during unit tests?
- Lighthouse CI
- axe-core via jest-axe (Correct answer)
- WAVE browser extension
- Pa11y CLI
Correct answer: axe-core via jest-axe
jest-axe wraps axe-core so you can assert `expect(await axe(container)).toHaveNoViolations()` in unit tests.
Question 6: What does 'flaky test' mean in front-end testing?
- A test that always fails deterministically
- A test that passes or fails inconsistently without code changes (Correct answer)
- A test covering deprecated features
- A test with no assertions
Correct answer: A test that passes or fails inconsistently without code changes
Flaky tests produce non-deterministic results, often due to timing issues, network calls, or shared state.
Question 7: In a CI pipeline, what is the purpose of running `eslint --max-warnings 0` rather than just `eslint`?
- Disables all ESLint rules
- Fails the pipeline if any warnings exist, treating them as errors (Correct answer)
- Enables auto-fix mode
- Suppresses all output to speed up CI
Correct answer: Fails the pipeline if any warnings exist, treating them as errors
`--max-warnings 0` causes ESLint to exit with a non-zero code if even one warning is produced, making the CI build fail.
Front End Development Quality Control & Assurance 2
Which testing approach verifies that individual UI components render correctly in isolation without requiring a full browser environment?