Front-end Web Development Testing Syllabus

Testing syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for Testing in Front-end Web Development, not a summary of it.

1. 1

   Unit Testing

   2 topics

   • Jest
   • Mocha
2. 2

   End-to-End Testing

   2 topics

   • Cypress
   • Selenium

Testing flashcards for Front-end Web Development

23 of 50 cards from the Testing deck — real questions with worked 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.

21. 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.

22. 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.

23. 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.

See more Testing flashcards →

Planning Testing for Front-end Web Development

Testing (Front-end Web Development) FAQ