unit-testing - react-navigation-hooks : How to test useFocusEffect

Question

据我所知，应该这样做，以便 useFocusEffect 可以作为 useEffect 进行测试(模拟)。我将 useFocusEffect 用于 fetchData:

useFocusEffect(
  useCallback(() => {
    fetchData();
  }, [fetchData]),
);

错误信息:
react-navigation hooks 需要导航上下文，但找不到。确保您没有忘记创建和渲染 react-navigation 应用程序容器。如果你需要访问一个可选的导航对象，你可以使用Context(NavigationContext)，它可能会返回

软件包版本:

"jest": "^24.9.0",
"react-native": "0.61.2",
"react-navigation": "^4.0.10",
"react-navigation-hooks": "^1.1.0",
"@testing-library/react-native": "^4.0.14",

Answer 1

假设您在测试中渲染您的组件，您需要将它包装在一个假的 <NavigationContext> 中。这样做可以让useFocusEffect查找所需的内容，以确定组件的焦点是否已由您的应用程序导航集中。
此示例使用 render 中的 react-native-testing-library 。我认为它类似于其他渲染方法。

import { NavigationContext } from "@react-navigation/native"
import { render } from "react-native-testing-library"

// fake NavigationContext value data
const navContext = {
  isFocused: () => true,
  // addListener returns an unscubscribe function.
  addListener: jest.fn(() => jest.fn())
}

// MyComponent needs to be inside an NavigationContext, to allow useFocusEffect to function.
const { toJSON } = render(
  <NavigationContext.Provider value={navContext}>
    <MyComponent />
  </NavigationContext.Provider>
)