Jest+RNTL多步骤表单测试：如何单次渲染分用例测试？

报错原因 #

你在describe顶层直接渲染组件的方式行不通，因为Jest默认会在每个测试用例执行前后重置测试环境，组件会在第一个test执行前就被卸载，导致后续访问DOM节点时抛出"Unable to find node on an unmounted component"错误。

解决方案：单次渲染+顺序测试 #

通过beforeAll在所有测试用例执行前仅渲染一次组件，将渲染结果保存在describe作用域的变量中，然后按流程顺序编写独立的test用例，每个用例基于前一个用例的状态继续测试。

修改后的代码示例 #

import { render, fireEvent, waitFor } from '@testing-library/react-native';
// 导入你的renderWithProviders和RegisterNewUser组件

describe('Registration process', () => {
  let view;

  // 所有测试用例执行前，完成组件初始渲染并等待UI就绪
  beforeAll(async () => {
    view = render(renderWithProviders(<RegisterNewUser />));
    // 等待初始步骤的UI渲染完成，避免后续断言提前执行
    await waitFor(() => {
      expect(view.getByText('register.name.title')).toBeOnTheScreen();
    });
  });

  // 测试第一步：姓名输入
  test('Name Step: should render name input and navigate to next step on valid input', async () => {
    const nameInput = await view.findByPlaceholderText('register.name.fieldPlaceholder');
    // 输入姓名
    await fireEvent.changeText(nameInput, 'George');
    // 点击下一步
    fireEvent.press(view.getByTestId(nextStepTestId));
    
    // 等待UI切换，验证姓名步骤已隐藏
    await waitFor(() => {
      expect(view.queryByText('register.name.title')).not.toBeOnTheScreen();
    });
  });

  // 测试第二步：邮箱输入
  test('Email Step: should render email input and navigate to next step on valid input', async () => {
    // 验证当前处于邮箱步骤
    expect(view.getByText('register.email.title')).toBeOnTheScreen();
    
    const emailInput = await view.findByPlaceholderText('register.email.fieldPlaceholder');
    await fireEvent.changeText(emailInput, 'george@example.com');
    fireEvent.press(view.getByTestId(nextStepTestId));
    
    await waitFor(() => {
      expect(view.queryByText('register.email.title')).not.toBeOnTheScreen();
    });
  });

  // 后续步骤测试...

  // 所有测试完成后手动清理组件
  afterAll(() => {
    view.unmount();
  });
});

关键注意事项 #

• 按顺序执行测试：Jest默认是顺序执行test用例的，不要使用test.concurrent，否则步骤状态会混乱。
• 用waitFor处理异步更新：步骤切换、状态更新都是异步的，必须用waitFor包裹断言，确保UI更新完成后再验证。
• 用queryBy*检查元素不存在：getBy*找不到元素会直接抛出错误，而queryBy*返回null，适合断言元素已消失的场景。
• 禁用自动清理（可选）：如果你的测试环境启用了RNTL的自动cleanup（比如全局设置），需要在beforeAll中禁用，避免组件被提前卸载：

  beforeAll(() => {
    jest.spyOn(require('@testing-library/react-native'), 'cleanup').mockImplementation(() => {});
  });
  
  afterAll(() => {
    require('@testing-library/react-native').cleanup.mockRestore();
    view.unmount();
  });
  

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