React Native Quality Control & Assurance 3 — Questions and Answers
Question 1: What is the recommended way to test navigation in a React Native app using React Navigation?
- Mock the entire navigation library
- Wrap the component with NavigationContainer in tests (Correct answer)
- Use Detox exclusively for all navigation tests
- Test navigation by checking URL changes
Correct answer: Wrap the component with NavigationContainer in tests
Wrapping components with NavigationContainer in unit tests provides a real navigation context without needing E2E setup.
Question 2: In Flipper, which plugin is most useful for inspecting React Native component state and props?
- Network plugin
- React DevTools plugin (Correct answer)
- Crash Reporter plugin
- Layout Inspector plugin
Correct answer: React DevTools plugin
The React DevTools plugin in Flipper lets you inspect the component tree, state, and props in real time.
Question 3: Which approach best prevents flakiness in Detox E2E tests that involve animations?
- Increase timeouts to wait for animations
- Disable animations via UIManager in test builds (Correct answer)
- Use jest.runAllTimers() to skip animations
- Reduce animation duration to 1ms in JS
Correct answer: Disable animations via UIManager in test builds
Setting UIManager.setLayoutAnimationEnabledExperimental(false) or disabling animations in native test builds eliminates animation-related timing flakiness.
Question 4: What does `coverage` threshold configuration in jest.config.js enforce?
- The maximum number of test files allowed
- Minimum percentages of statements, branches, functions, or lines that must be covered (Correct answer)
- The time limit for each test suite
- The number of assertions required per test
Correct answer: Minimum percentages of statements, branches, functions, or lines that must be covered
The coverageThreshold option fails the test run if coverage drops below specified percentages for statements, branches, functions, or lines.
Question 5: Which React Native API can be used inside tests to detect if animations have completed before asserting UI state?
- Animated.flush()
- jest.runAllTimers() with fake timers enabled
- InteractionManager.runAfterInteractions()
- Both B and C are valid depending on context (Correct answer)
Correct answer: Both B and C are valid depending on context
jest.runAllTimers() works for JS-driven animations with fake timers, while InteractionManager.runAfterInteractions() handles interaction-based deferrals.
Question 6: What is the main advantage of using `renderHook` from @testing-library/react-native?
- It renders hooks with full component UI for visual testing
- It lets you test custom hooks in isolation without a wrapping component (Correct answer)
- It automatically mocks all hook dependencies
- It generates TypeScript types for hook return values
Correct answer: It lets you test custom hooks in isolation without a wrapping component
renderHook isolates custom hooks so you can test their logic and return values without building a full component around them.
Question 7: How does React Native's `LogBox` assist in quality assurance during development?
- It logs network requests for inspection
- It displays warnings and errors in an overlay to surface issues during development (Correct answer)
- It runs automated lint checks on component render
- It tracks component re-render counts
Correct answer: It displays warnings and errors in an overlay to surface issues during development
LogBox shows yellow warning boxes and red error overlays during development to help identify and fix issues before production.
React Native Quality Control & Assurance 3
What is the recommended way to test navigation in a React Native app using React Navigation?