NextJS Testing and Debugging Syllabus

Testing and Debugging syllabus — full chapter and topic list

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

1. 1

   Unit Testing

   3 topics

   • Setting Up Jest
   • Writing Unit Tests
   • Mocking and Stubbing
2. 2

   Integration Testing

   3 topics

   • Setting Up Cypress
   • Writing Integration Tests
   • Testing API Routes
3. 3

   Debugging

   3 topics

   • Using the Next.js Debugger
   • Common Debugging Techniques
   • Debugging in Production

Testing and Debugging flashcards for NextJS

20 of 50 cards from the Testing and Debugging deck — real questions with worked answers.

1. What is Jest and what type of testing tool is it?

   Jest is a JavaScript testing framework maintained by Meta that provides a test runner, assertion library, and built-in mocking. It is used for unit and integration testing and works out of the box with zero configuration for many projects.

2. Which packages do you typically install to set up Jest in a Next.js project?

   You install jest, jest-environment-jsdom, @testing-library/react, @testing-library/jest-dom, and @testing-library/user-event as dev dependencies. Next.js also provides next/jest to auto-configure Jest.

3. What does next/jest do in a Jest configuration file?

   next/jest automatically configures Jest for Next.js by handling transforms (via SWC), loading .env files, mocking stylesheets and image imports, and setting sensible defaults, so you don't need Babel config manually.

4. What is the purpose of the testEnvironment setting in a Jest config, and what value do you use for React component tests?

   testEnvironment defines the global environment Jest runs tests in. For testing React components that need DOM APIs you set it to 'jsdom' (jest-environment-jsdom), which simulates a browser DOM in Node.

5. What is the jest.config.js setupFilesAfterEnv option used for?

   setupFilesAfterEnv points to a setup file (commonly jest.setup.js) that runs after the test framework is installed, typically used to import '@testing-library/jest-dom' so custom matchers like toBeInTheDocument are available in every test.

6. What is a unit test?

   A unit test verifies a single, isolated piece of code (a function, component, or module) in isolation from its dependencies, ensuring that unit behaves correctly for given inputs. It is fast and does not touch external systems.

7. In Jest, what is the difference between describe, it/test, and expect?

   describe groups related tests into a suite, it (alias test) defines an individual test case, and expect creates an assertion about a value that is checked with a matcher such as toBe or toEqual.

8. What is the difference between Jest's toBe and toEqual matchers?

   toBe uses Object.is (strict reference/primitive equality), so it is for primitives or same object references. toEqual performs a deep recursive equality check on the contents of objects and arrays.

9. How do you assert that an asynchronous function's promise resolves to a specific value in Jest?

   Use async/await with expect: `await expect(fn()).resolves.toBe(value)`, or `expect(await fn()).toBe(value)`. For rejection use `await expect(fn()).rejects.toThrow()`.

10. In React Testing Library, what is the guiding principle behind its queries?

    Its principle is to test components the way users interact with them: query by accessible roles, labels, and visible text rather than implementation details, so tests resemble real usage and are resilient to refactors.

11. What is the difference between getBy, queryBy, and findBy queries in React Testing Library?

    getBy returns the element or throws if not found; queryBy returns the element or null (used to assert absence); findBy returns a promise that resolves when the element appears (used for async/appearing elements).

12. What is mocking in testing?

    Mocking is replacing a real dependency with a controlled fake object or function that simulates its behavior, letting you isolate the unit under test, avoid side effects, and control return values or verify how the dependency was called.

13. What is the difference between a mock and a stub?

    A stub provides canned/predetermined responses to calls and is used to control indirect inputs. A mock also records how it was called (arguments, call count) so you can verify interactions (behavior verification), not just return state.

14. How do you create a mock function in Jest, and how do you set its return value?

    Create it with `const fn = jest.fn()`. Set a return value with `fn.mockReturnValue(x)`, a resolved promise with `fn.mockResolvedValue(x)`, or a one-time value with `fn.mockReturnValueOnce(x)`.

15. What does jest.mock('module') do?

    jest.mock('module') automatically replaces all exports of the specified module with auto-mocked (jest.fn) versions, so the real implementation is not executed during the test. It is hoisted to the top of the file by Jest.

16. What is the difference between jest.spyOn and jest.fn?

    jest.fn() creates a brand-new standalone mock function. jest.spyOn(object, 'method') wraps an existing method so you can track calls while optionally keeping (or replacing via mockImplementation) the original implementation, and it can be restored.

17. How do you verify that a Jest mock function was called with specific arguments?

    Use the matcher `expect(mockFn).toHaveBeenCalledWith(arg1, arg2)`. To check call count use toHaveBeenCalledTimes(n), and to check it ran at all use toHaveBeenCalled().

18. What is the purpose of jest.clearAllMocks, jest.resetAllMocks, and jest.restoreAllMocks?

    clearAllMocks resets mock.calls/results data only; resetAllMocks also removes any mock implementations; restoreAllMocks restores original implementations of methods created with spyOn. They keep tests isolated between runs.

19. What is Cypress and what kind of testing is it primarily used for?

    Cypress is a JavaScript end-to-end (E2E) and component testing framework that runs tests in a real browser, providing automatic waiting, time-travel debugging, and a visual test runner for testing full user flows.

20. How do you install and open Cypress for the first time?

    Install with `npm install --save-dev cypress`, then open the interactive runner with `npx cypress open`, which scaffolds the cypress folder structure and lets you choose E2E or component testing.

See more Testing and Debugging flashcards →

Planning Testing and Debugging for NextJS

Testing and Debugging (NextJS) FAQ