8. Testing Components

Question 1

What does testing React components mean?

Answer 1

1. Verify output has not regressed
2. Ensure that rarely occurring corner cases produce the correct output
3. If component generates side effects, verify they occur but do not execute them
4. Verify that user interactions are handled as expected

Question 2

What are the factors that create variety across the spectrum of React components?

Answer 2

1. Components may or may not have lifecycle handlers
2. Components may or may not have internal state
3. Components may or may not generate side effects
4. Components may get state from arguments, or from external dependencies

Question 3

What factors make a React component more testable?

Answer 3

1. No internal state — output is an idempotent product of the props that are provided
2. No side effects — any AJAX calls, UI changes, or other side effects are handled by sagas, thunks, etc., but not by components
3. No lifecycle hooks — fetching data is handled on the application level, not the component level

Question 4

What attributes of Redux make our React components more testable?

Answer 4

1. Components don’t generate side-effects
2. Components consist of logical display and container components
3. Components do not have internal state

Question 5

How should React Redux components be tested?

Answer 5

1. Test Container and Display elements separately
2. Use unit tests to verify methods and properties passed by Container are accurate
3. Use snapshot tests to verify the output of the Display component, passing props directly

Question 6

What in particular is Enzyme useful for testing as opposed to react-test-renderer?

Answer 6

A variety of interactions including click, keyboard, input, and more.

Question 7

What makes Enzyme challenging to use?

Answer 7

The variety of open bugs.

Question 8

What are the steps in testing stateful React components?

Answer 8

1. Mock dependencies, then test them
2. Use spies to verify side effects
3. Move logic from lifecycle to services where possible
4. Prevent regression with snapshots
5. Inject values by writing mocks for services
6. Make stateless components where possible

Question 9

How do you use a mocked service rather than the original in your test?

Answer 9

By calling jest.mock at the top of your test file and passing it the path to the original service — it then knows to look into the \_\_mocks\_\_ folder, find the mock, and use that rather than the original service.

eg. jest.mock("../../services/NotificationService");