react-hook-form submit 没有从 jest 测试中获取 changeText

Posted 2023-02-19

【中文标题】react-hook-form submit 没有从 jest 测试中获取 changeText

【英文标题】：react-hook-form submit does not pick up changeText from jest test

【发布时间】：2021-02-25 03:59:50

【问题描述】：

我有以下react-native-form：

const  register, handleSubmit, setValue, errors  = useForm();

const onSubmit = (data) => 
  console.log(data);
  return firebase
    .auth()
    .signInWithEmailAndPassword(data.email, data.password)
    .then((info) => 
      console.log(info.additionalUserInfo.profile);
    )
    .catch((err) => 
      console.error(err);
    );
;

  <View>
    <TextInput
      placeholder="Email"
      testID="email-input"
      onChangeText=(t) => setValue("email", t)
      style=styles.loginTextInput
    ></TextInput>
    <TextInput
      secureTextEntry=true
      testID="password-input"
      placeholder="Password (min. 8 characters)"
      onChangeText=(t) => setValue("password", t)
      style=styles.loginTextInput
    ></TextInput>
    <TouchableOpacity
      onPress=handleSubmit(onSubmit)
      testID="login-email-button"
      style=[styles.loginButton, styles.loginEmailButton]
    >
      <Text style=styles.buttonText>Login with Email</Text>
    </TouchableOpacity>
  </View>

我正在以下测试中使用jest 测试提交和对firebase.auth().signInWithEmailAndPassword 的调用：

test("submit works", async () => 
  const  getByPlaceholderText, getByTestId, getByText  = render(
    <EmailLogin />
  );
  const emailInput = getByTestId("email-input");
  const passwordInput = getByTestId("password-input");
  const submitButton = getByTestId("login-email-button");

  const email = "[e-mail]";
  const password = "password";
  fireEvent.changeText(emailInput, email);
  fireEvent.changeText(passwordInput, password);
  fireEvent.press(submitButton);

  expect(firebase.auth().signInWithEmailAndPassword).toHaveBeenCalledWith(
    email,
    password
  );
);

我将signInWithEmailAndPassword 模拟为jest.fn()。

当我运行这个测试时，它失败了：

expect(jest.fn()).toHaveBeenCalledWith(...expected)

Expected: "[e-mail]", "password"
Received: undefined, undefined

我注意到我的onSubmit 函数中的console.log(data) 打印出来了：

console.log
  

这意味着没有文本被拾取。

我该如何测试这个表单？

【问题讨论】：

你也在用酶吗？有了它会轻松很多

你能展示一下你是如何嘲笑firebase的吗？

【参考方案1】：

我认为它为您返回 undefined 的原因是您正在尝试以同步方式测试异步行为。我建议在您的onSubmit 方法中使用Promises 来等待firebase auth 调用完成。

这样的东西可以工作

const onSubmit = async (data) => 
  console.log(data);
  return await firebase
    .auth()
    .signInWithEmailAndPassword(data.email, data.password)
    .then((info) => 
      console.log(info.additionalUserInfo.profile);
    )
    .catch((err) => 
      console.error(err);
    );
;

这将确保您正在等待登录。

在你的测试中，我会将 firebase 模拟成这样

jest.mock('firebase', () => (
    auth: jest.fn().mockReturnThis(),
    signInWithEmailAndPassword: jest.fn(),
   )
);

然后在您的测试中，您还需要使用waitFor() 等待登录发生，然后您可以检查您的结果。像这样的东西可以工作

await waitFor(() => expect(firebase.auth().signInWithEmailAndPassword).toHaveBeenCalledWith(
    email,
    password
  ););

我自己没有测试过，但尝试使用 async 和 Promises 的想法，如果可行，请告诉我。