ReactJS Testing in React Flashcards

24 sample cards from the Testing in React deck

Sampled from the end of the deck, so these are different cards from the ones shown on the syllabus page.

1. When would you use the getAllBy* variant of a Testing Library query?

   When multiple elements match the query; getAllBy* returns an array and throws if none are found, whereas the singular getBy* throws if more than one matches.

2. What is an integration test?

   An integration test verifies that multiple units/components work together correctly, exercising their combined behavior and the interfaces between them rather than each unit in isolation.

3. How does an integration test differ from a unit test in scope?

   A unit test isolates one piece with dependencies mocked; an integration test lets several real units interact (e.g., a form component with its child inputs and a context provider) to catch interface and wiring bugs.

4. In RTL, how do you wait for an assertion to pass after an asynchronous update?

   Wrap it in await waitFor(() => expect(...).toBe...); waitFor retries the callback until it passes or times out.

5. What is the screen object in React Testing Library and why is it preferred?

   screen is a global object bound to document.body exposing all queries (screen.getByRole, etc.); it's preferred because you don't have to destructure queries from render, keeping tests consistent.

6. How do you provide React context or a router to a component under integration test?

   Pass a wrapper option to render, e.g., render(<Child />, { wrapper: ({children}) => <Provider>{children}</Provider> }), or wrap the element directly in the provider/router.

7. What is the @testing-library/user-event library and how does it differ from fireEvent?

   user-event simulates full user interactions (focus, keydown, keyup, input) more realistically, while fireEvent dispatches a single low-level DOM event; user-event is preferred for accurate behavior.

8. How do you simulate a user clicking a button with user-event (v14+)?

   const user = userEvent.setup(); then await user.click(screen.getByRole('button', { name: /submit/i })); — user-event methods return Promises and must be awaited.

9. How do you type text into an input field using user-event?

   await user.type(screen.getByRole('textbox'), 'hello'); which fires keyboard events character by character to update the input value.

10. After firing a user interaction, how do you assert that a handler prop was called?

    Pass a jest.fn() as the handler prop, trigger the interaction, then assert expect(handler).toHaveBeenCalledTimes(1) and/or toHaveBeenCalledWith(expectedArgs).

11. Why must state updates from interactions be wrapped in act() (and how does RTL handle it)?

    React requires state updates to occur inside act() so effects flush before assertions; RTL's render, fireEvent, and user-event already wrap updates in act(), so manual act() is rarely needed.

12. What is Cypress?

    Cypress is a JavaScript end-to-end and component testing framework that runs tests directly in a real browser, offering automatic waiting, time-travel debugging, and a visual test runner.

13. Which command installs Cypress as a dev dependency, and which opens its interactive runner?

    Install with npm install --save-dev cypress; open the GUI runner with npx cypress open, or run headlessly with npx cypress run.

14. Where does Cypress place end-to-end test (spec) files by default, and what extension do they use?

    In the cypress/e2e directory, using the .cy.js (or .cy.ts) extension.

15. What is the purpose of the cypress.config.js file?

    It configures Cypress project settings such as baseUrl, viewport size, environment variables, timeouts, and e2e/component testing setup nodes.

16. What is an end-to-end (E2E) test?

    An E2E test validates a complete user workflow through the whole running application—UI, network, and backend—simulating real user actions from start to finish in a browser.

17. How do you visit a page and click a link in a Cypress E2E test?

    cy.visit('/'); then cy.get('a.nav-link').click(); Cypress automatically waits for the element to be actionable before clicking.

18. How does Cypress reduce test flakiness compared to older tools like Selenium?

    Cypress automatically retries commands and assertions with built-in waiting until elements exist and are actionable, so you rarely need explicit sleeps/waits.

19. Which Cypress command types text into an input, and which asserts on an element?

    cy.get(selector).type('text') types input; assertions use cy.get(selector).should('have.text', 'value') or .should('be.visible').

20. How do you stub or intercept a network request in Cypress?

    Use cy.intercept('GET', '/api/users', { fixture: 'users.json' }).as('getUsers'); then cy.wait('@getUsers') to control and await the response.

21. What is the testing pyramid and what does it recommend?

    The testing pyramid recommends many fast, cheap unit tests at the base, fewer integration tests in the middle, and a small number of slow, expensive end-to-end tests at the top.

22. What does CI/CD stand for, and why run tests in it?

    Continuous Integration / Continuous Delivery (or Deployment); running the test suite automatically on every push/PR catches regressions early and gates broken code from being merged or released.

23. How do you run Jest non-interactively in a CI environment?

    Run jest --ci (often with --watchAll=false and --coverage); the --ci flag disables snapshot writing for new snapshots so unexpected snapshots fail instead of being created.

24. In a GitHub Actions workflow, what are the typical steps to run a React project's tests?

    Check out the code (actions/checkout), set up Node (actions/setup-node), install dependencies (npm ci), then run the tests (npm test -- --ci or npx cypress run).

What this deck covers

Testing in React flashcards FAQ