使用Jest与Testing-Library测试React Native Formik表单时act警告问题求助

我刚好碰到过类似的问题，这警告本质上是因为测试里的异步状态更新没有被正确地包裹在React的act()里，但不用慌——Testing Library其实已经帮我们处理了大部分场景，问题出在你测试代码里的几个小细节上，咱们一步步来修复：

1. 别用手动DOM遍历找错误提示，给错误文本加个TestID #

你之前通过多层parent!链查找错误文本的方式不仅脆弱（组件结构一变就失效），更重要的是这是同步查找，但Formik的校验是异步触发的，这就导致后续断言时React可能还在更新状态，触发act警告。

解决方法很简单：给Input组件里的错误提示文本加一个专属的TestID。比如修改你的Input组件（假设它的结构是这样的）：

// Input组件内部
const Input = ({ errorMessage, testID, ...props }) => {
  return (
    <View>
      {/* 输入框本身 */}
      <TextInput testID={testID} {...props} />
      {/* 错误提示文本，新增testID */}
      {errorMessage && <Text testID={`${testID}-error`}>{errorMessage}</Text>}
    </View>
  );
};

或者直接给登录页面里的错误提示绑定固定TestID（比如tiConfig.SIGN_IN_USERNAME_ERROR），这样测试里就能直接用Testing Library的异步查询方法获取它了。

2. 重构测试代码，用正确的异步查询和等待逻辑 #

调整后的测试代码应该完全依赖Testing Library的findBy*（自动等待元素出现）和waitFor（等待断言成立），避免同步操作和异步状态更新的冲突：

test.only("Sign in username field validates correctly", async () => { 
  const component = render(<SignInScreen />); 
  // 用getByTestId同步获取输入框（组件渲染后就存在，无需等待）
  const usernameInput = component.getByTestId(tiConfig.SIGN_IN_USERNAME_INPUT); 
  const submit = component.getByTestId(tiConfig.SIGN_IN_SUBMIT); 

  // 1. 点击提交，触发必填校验
  fireEvent.press(submit);
  // 异步查找错误提示，等待它出现并校验内容
  const requiredError = await component.findByTestId(tiConfig.SIGN_IN_USERNAME_ERROR);
  expect(requiredError.props.children).toBe(translations.required);

  // 2. 输入合法用户名，错误提示应该消失
  fireEvent.changeText(usernameInput, "username");
  // 用queryByTestId检查元素是否不存在（queryBy不会抛出错误）
  await waitFor(() => {
    expect(component.queryByTestId(tiConfig.SIGN_IN_USERNAME_ERROR)).toBeNull();
  });

  // 3. 输入过长用户名，触发长度校验
  fireEvent.changeText(usernameInput, "toolongusernameshouldntbeallowed");
  const lengthError = await component.findByTestId(tiConfig.SIGN_IN_USERNAME_ERROR);
  expect(lengthError.props.children).toBe(translations.formatString(
    translations['validationNCharOrLess'],
    { n: 15 }
  ));
});

3. 为什么原来的代码会触发警告？ #

你之前的代码里：

• 同步获取了errorMessage元素（usernameInput.parent!...findByType(Text)），但这个元素的内容是Formik异步校验后才更新的，断言时React还在处理状态更新，没有被act包裹；
• waitFor虽然会包裹act，但如果等待的目标元素是同步获取的，还是会存在状态更新和测试代码不同步的问题。

而用findBy*和queryBy*的好处是：

• findBy*是getBy* + waitFor的组合，自动等待元素出现/更新，内部已经包裹了act；
• queryBy*用于检查元素是否不存在，配合waitFor能确保状态更新完成后再断言。

额外小提示 #

• 尽量避免手动操作DOM（比如parent!链），Testing Library的设计初衷就是让你通过用户视角的方式查找元素（TestID、文本、标签等）；
• 所有涉及异步状态更新的断言，要么用await findBy*，要么用await waitFor(() => { ... })，确保等待React完成渲染更新。

这样修改后，你的测试不仅能通过，那个烦人的act警告也会消失啦！

内容的提问来源于stack exchange，提问作者SOMinusAnySpeedrun