测试使用笑话和测试库调用内部自定义钩子的反应本机组件

Question

我第一次尝试为我的 React Native 应用程序编写测试。我有一个组件 LoginForm ，它在内部调用一个钩子 useLoginForm ，其编写方式如下：

//LoginForm.js

import { useLoginForm } from './hooks';
//more imports ...

export default function LoginForm() {
  //other variables ... 
  const {
    //more functions and state variables...
    isLoading,
    login
  } = useLoginForm()

  return (
    //more code...
            <TouchableOpacity
                onPress={login}
            >
                {isLoading ?
                    <ActivityIndicator accessibilityHint={"login-loading"}/>
                    :
                    <Text>
                        confirm
                    </Text>
                }
            </TouchableOpacity>

  )
}

这个想法是，当我按下确认按钮时，它会将文本替换为ActivityIndi​​cator 并且它停止在登录功能内加载 因为它成功了或者发生了错误。

钩子内部：

//useLoginForm.js

import { signInRequest } from "../api"
//... 

export const useLoginForm = () => {
  const [isLoading, updateIsLoading] = React.useState(false)
  // ...
  

  const login = async () => {
        updateIsLoading(true)
        await signInRequest(email, password)
          .then(data => {
            // do something ...
                updateIsLoading(false)
            }
          })
          .catch(error => {
            updateIsLoading(false)
            // ...
          })
    }
}

此外，我的文件当前的结构如下

─src
    └───components
        └───LoginForm
            ├───hooks
            │   ├───useLoginForm.js
            │   └───index.js
            ├───LoginForm.js
            ├───LoginForm.test.js
            └───index.js

，其中 index.js 包含以下行：

// hooks/index.js

export { useLoginForm } from "./useLoginForm";

我正在使用 jest 和 @testing-library/react -本机。

如果需要，我可以包括测试，但目前它只包括一些非常基本的断言和事件，例如更改输入字段和按确认按钮

有一些事情我无法理解：

1. 如何访问 登录 函数来检查它是否被调用？

fireEvent.press(getByText("confirm"))
await waitForElementToBeRemoved(() => getByAccessibilityHint("login-loading"))
// the following line is what I am trying to accomplish
expect(login).toHaveBeenCalled()

2. 如果我要使用此文件结构ONLY模拟此login函数，我应该怎么做？我尝试了在 StackOverflow 上找到的一些方法，但都没有成功。

3. 我是否可以使用此文件结构正确导出和导入？ （我最近重构了我的应用程序，所以我对这个文件结构仍然有点不确定）