Answers

Here you will find the answers to the questions provided at the end of each chapter:

Chapter 1

All questions are open-response.

Chapter 2

1. The render method.
2. The screen object.
3. Presentational components.
4. The debug method.
5. This is an open-response question.

Chapter 3

1. The user-event module closely resembles events that occur when users perform actions on the DOM, such as keydown and keyup events.
2. MSW allows you to test components that make HTTP requests to APIs. This is done by intercepting the request before it reaches the internet and instead returns controllable mock data for testing.
3. A mock function is a test double used to make assertions. For example, we can use a mock function to verify that a method is called when a user clicks a button.
4. The risk is that substituting actual dependencies with mocked versions to test components doesn't allow you to test resulting behaviors when integrated with real production dependencies.
5. This is an open-response question.
6. Use a getBy* query when you expect an element to be present in the DOM's current state. Use a findBy* query when an element's presence depends on an asynchronous action that delays the time the element appears in the DOM. Use a queryBy* query when you want to verify that an element is not present in the DOM.

Chapter 4

1. Testing integrated components allow you to mitigate risk by verifying production behavior when components interact with each other. Using the isolated approach, we would be replacing real dependencies with fake data and responses and, therefore, not mitigate as much risk. Also, in many situations, you can cover more code in fewer tests using the integrated testing approach.
2. You should only use the data-testid attribute as the last resort when other preferred queries methods such as getBy* and findBy* cannot be used to select elements.
3. The act method ensures your tests behave closer to how React updates the browser's DOM. Use act in situations where you need to manually make component updates such as resolving a Promise that React otherwise would not be aware of in your test. React Testing Library automatically wraps components in act eliminating the need to manually wrap all code that updates the component in most scenarios, such as click events.

Chapter 5

1. Unlike Enzyme or ReactTestUtils, React Testing Library allows you to write tests that avoid implementation details and resemble DOM interactions from the end user's perspective.
2. Running tests in Jest's Watch Mode allows you to learn when regressions occur as you add new code quickly. Running tests in Watch Mode is also beneficial when using the TDD approach to building components.
3. Use the each method when you want to execute the same test multiple times with different values.

Chapter 6

All questions are open-response.

Chapter 7

All questions are open-response.