Examius

🌍 Front-end Web Development · subject

Front-end Web Development Testing Syllabus

The Testing syllabus for Front-end Web Development in full: 2 chapters and 4 topics, every one listed below, plus 50 Testing flashcards with answers.

2Chapters
4Topics
50Flashcards

Testing syllabus: all 2 chapters

Expand any chapter to see its topics and sub-topics.

  1. Unit Testing

     2 topics
    • Jest
    • Mocha

  2. End-to-End Testing

     2 topics
    • Cypress
    • Selenium

Front-end Web Development Testing flashcards — 50 questions with answers

  1. What is Jest?

    Jest is a JavaScript testing framework developed by Meta (Facebook). It is a zero-config, all-in-one tool that includes a test runner, assertion library, mocking support, and code-coverage reporting.

  2. What is the default test file naming convention Jest looks for?

    Jest automatically runs files matching the patterns `*.test.js`, `*.spec.js`, or any file inside a `__tests__` directory.

  3. In Jest, what function pair defines an individual test case and its assertion?

    `test(name, fn)` (or its alias `it(name, fn)`) defines a test case, and `expect(value).matcher()` makes the assertion inside it.

  4. List four common Jest matchers and what each checks.

    `toBe(x)` — strict (===) equality; `toEqual(x)` — deep/recursive equality; `toContain(x)` — array/string contains item; `toThrow()` — function throws an error.

  5. What is the difference between `toBe` and `toEqual` in Jest?

    `toBe` uses `Object.is` (reference/primitive identity), so it fails on two distinct objects with equal contents. `toEqual` recursively compares the values of all properties, so structurally identical objects pass.

  6. What Jest functions group tests and run setup/teardown logic?

    `describe()` groups related tests; `beforeEach`/`afterEach` run before/after every test; `beforeAll`/`afterAll` run once before/after all tests in the block.

  7. How do you create a mock function in Jest?

    Use `jest.fn()` to create a mock function. `jest.mock('module')` auto-mocks an entire module, and `jest.spyOn(obj, 'method')` wraps an existing method while tracking calls.

  8. In Jest, how do you test asynchronous code that returns a Promise?

    Either return the Promise from the test, use `async/await` with `await expect(...).resolves`/`.rejects`, or call the `done` callback for callback-style code.

  9. What is snapshot testing in Jest?

    Snapshot testing serializes a component or value to a stored `.snap` file on the first run, then compares future runs against it. `expect(value).toMatchSnapshot()` flags any unexpected change.

  10. What Jest CLI flag regenerates outdated snapshots?

    `jest --updateSnapshot` (or the shorthand `jest -u`) updates stored snapshots to match current output.

  11. How do you measure code coverage with Jest?

    Run `jest --coverage`, which uses Istanbul under the hood to report statement, branch, function, and line coverage percentages.

  12. What does the `--watch` flag do in Jest?

    `jest --watch` runs Jest in interactive watch mode, re-running only tests related to files changed since the last commit.

  13. What is the purpose of `jest.config.js`?

    It is Jest's configuration file where you set options such as `testEnvironment`, `setupFiles`, `coverageThreshold`, `moduleNameMapper`, and `transform`.

  14. What does `testEnvironment` control in Jest, and what are its common values?

    It sets the global environment for tests. Common values are `node` (default for backend) and `jsdom` (simulates a browser DOM for front-end component tests).

  15. In Jest, how do you assert that a mock function was called with specific arguments?

    Use `expect(mockFn).toHaveBeenCalledWith(arg1, arg2)`; related matchers include `toHaveBeenCalled()` and `toHaveBeenCalledTimes(n)`.

  16. What is Mocha?

    Mocha is a flexible, feature-rich JavaScript test framework that runs on Node.js and in the browser. It provides the test structure and runner but, unlike Jest, leaves assertions and mocking to separate libraries.

  17. Why is Mocha often paired with Chai and Sinon?

    Mocha provides only the test runner/structure. Chai supplies the assertion library (e.g., `expect`, `should`, `assert`), and Sinon supplies spies, stubs, and mocks.

  18. What hooks does Mocha provide for setup and teardown?

    `before()`, `after()`, `beforeEach()`, and `afterEach()` — run once before all tests, once after all, and before/after each test respectively.

  19. What are the three assertion styles offered by Chai?

    `assert` (classic TDD style), `expect` (BDD chainable), and `should` (BDD that extends Object.prototype).

  20. How do you test asynchronous code in Mocha?

    Either accept the `done` callback argument and call it when finished, or return a Promise / use an `async` test function that Mocha awaits.

Show the other 30 Testing flashcards

  1. What is the default Mocha timeout for a test, and how do you change it?

    The default timeout is 2000 ms ($2$ seconds). Override it per test with `this.timeout(ms)` or globally with the `--timeout`/`-t` CLI flag.

  2. In Mocha, what is the difference between `describe.only`/`it.only` and `describe.skip`/`it.skip`?

    `.only` runs exclusively that block/test and ignores all others; `.skip` marks the block/test as pending so it is not executed.

  3. What is a Sinon spy versus a stub versus a mock?

    A spy records information about function calls without changing behavior; a stub replaces a function with controllable behavior (e.g., forced return values); a mock is a stub with pre-programmed expectations that are verified.

  4. What configuration file does Mocha use, and what is one common option?

    Mocha reads `.mocharc.js`/`.mocharc.json`/`.mocharc.yml`. Common options include `spec` (test file glob), `timeout`, `reporter`, and `require`.

  5. Name three built-in Mocha reporters.

    `spec` (default, nested view), `dot` (minimal dots), and `tap` (Test Anything Protocol). Others include `nyan` and `json`.

  6. What tool is commonly used with Mocha to generate code-coverage reports?

    `nyc`, the command-line interface for Istanbul, e.g., `nyc mocha`.

  7. What is Cypress?

    Cypress is a JavaScript end-to-end (E2E) testing framework that runs tests directly inside the browser alongside the application, providing fast, reliable testing of web UIs with automatic waiting and time-travel debugging.

  8. How does Cypress's architecture differ fundamentally from Selenium's?

    Cypress runs in the same run-loop as the application inside the browser (no network/WebDriver protocol), giving native access to the DOM. Selenium drives the browser externally via the WebDriver protocol over HTTP.

  9. What is the main Cypress command to visit a page and to select an element?

    `cy.visit(url)` loads a page; `cy.get(selector)` queries DOM elements (and `cy.contains(text)` selects by text).

  10. What is 'automatic waiting' (retry-ability) in Cypress?

    Cypress automatically retries commands and assertions until they pass or a timeout is reached, eliminating the need for manual `sleep`/explicit waits for elements to appear.

  11. How do you make assertions in Cypress?

    Chain `.should()` or `.and()` onto a command, e.g., `cy.get('.btn').should('be.visible').and('contain', 'Save')`. Cypress bundles Chai, Sinon-Chai, and Chai-jQuery assertions.

  12. What does `cy.intercept()` do in Cypress?

    It spies on, stubs, or modifies network requests/responses, allowing you to mock API calls and assert that requests were made.

  13. How do you reference a stored value or alias in Cypress?

    Create an alias with `.as('name')` and retrieve it later with `cy.get('@name')`; this is commonly used with `cy.intercept()` to wait on network requests via `cy.wait('@name')`.

  14. What two test types does Cypress support?

    End-to-end (E2E) tests that drive the full application in a browser, and component tests that mount and test individual UI components in isolation.

  15. What command opens Cypress's interactive Test Runner, and which runs headlessly?

    `cypress open` launches the interactive GUI Test Runner; `cypress run` executes tests headlessly in the terminal/CI.

  16. What is the default folder where Cypress E2E tests live, and what is the config file?

    E2E spec files live in `cypress/e2e/` and configuration is in `cypress.config.js` (older versions used `cypress.json` and `cypress/integration/`).

  17. What is a key limitation of Cypress regarding browsers and tabs?

    Cypress runs only in browser engines it supports (Chromium-family, Firefox, WebKit; historically no Safari) and cannot control multiple browser tabs or multiple simultaneous browsers in one test.

  18. What is Selenium?

    Selenium is an open-source suite for automating web browsers across many languages and browsers. Its core, Selenium WebDriver, programmatically drives a real browser to simulate user interactions for testing.

  19. What are the main components of the Selenium suite?

    Selenium WebDriver (browser automation API), Selenium IDE (record-and-playback browser extension), and Selenium Grid (parallel/distributed test execution across machines and browsers).

  20. What protocol does Selenium WebDriver use to communicate with browsers?

    The W3C WebDriver protocol, sending JSON commands over HTTP to a browser-specific driver (e.g., ChromeDriver, GeckoDriver) that controls the browser.

  21. Name four common Selenium locator strategies.

    `By.id`, `By.name`, `By.className`, `By.cssSelector`, `By.xpath`, `By.linkText`, and `By.tagName` are the standard `By` locators for finding elements.

  22. In Selenium, what is the difference between implicit and explicit waits?

    An implicit wait sets a global polling timeout applied to all element lookups. An explicit wait (`WebDriverWait` + `ExpectedConditions`) waits for a specific condition on a specific element, which is more precise and recommended.

  23. What is the Page Object Model (POM) in Selenium testing?

    A design pattern where each page is represented by a class encapsulating its element locators and actions, separating test logic from UI structure to improve maintainability and reduce duplication.

  24. What is Selenium Grid used for?

    Selenium Grid distributes tests across multiple machines and browsers in parallel using a hub-and-node (or modern router/distributor) architecture, reducing total execution time and enabling cross-browser/cross-platform testing.

  25. What method launches a browser session and navigates to a URL in Selenium WebDriver?

    Instantiate a driver (e.g., `new ChromeDriver()`) then call `driver.get(url)` (or `driver.navigate().to(url)`) to load the page.

  26. What is the role of GeckoDriver and ChromeDriver in Selenium?

    They are the browser-specific driver executables that translate WebDriver commands into actions in Firefox (GeckoDriver) and Chrome (ChromeDriver) respectively.

  27. Compare Cypress and Selenium on language support and execution model.

    Selenium supports many languages (Java, Python, C#, Ruby, JS) and runs outside the browser via WebDriver. Cypress is JavaScript/TypeScript-only and runs inside the browser, giving faster execution but less cross-browser/language breadth.

  28. Which testing tools are unit/integration frameworks versus end-to-end/UI tools, among Jest, Mocha, Cypress, Selenium?

    Jest and Mocha are primarily unit/integration test frameworks (run in Node/jsdom). Cypress and Selenium are end-to-end/UI automation tools that drive real browsers.

  29. What is the difference between unit testing and end-to-end (E2E) testing?

    Unit testing verifies an individual function/module in isolation (often with mocks), running fast. E2E testing verifies the entire application flow through the UI as a real user would, exercising all integrated layers.

  30. In the testing pyramid, how do unit, integration, and E2E tests compare in quantity and speed?

    The pyramid prescribes many fast, cheap unit tests at the base, fewer integration tests in the middle, and the fewest slow, expensive E2E (UI) tests at the top.

Front-end Web Development Testing FAQ

What is in the Front-end Web Development Testing syllabus?

Front-end Web Development Testing is split into 2 chapters: Unit Testing and End-to-End Testing. Together they contain 4 topics.

How many chapters are in Front-end Web Development Testing?

2 chapters, containing 4 topics. The largest chapter is Unit Testing, with 2 topics.

Are there flashcards for Front-end Web Development Testing?

Yes — a 50-card Testing deck, printed in full in the flashcards section of this page and available in the Examius app with spaced repetition. The free plan covers one exam of your choice, including its flashcards; Examius Pro, a one-time purchase, unlocks every other exam and deck.