React Native全应用屏幕流测试：求推荐模拟导航路径的测试框架

嘿，很高兴你在学习Jest！针对你想模拟多屏幕完整导航路径的需求，我整理了几个实用的方案和工具，帮你搞定这类集成或端到端测试：

1. React Navigation + Jest（React Native场景） #

如果你是React Native项目且用React Navigation，官方配套的@react-navigation/testing库完全能满足需求，它可以和Jest无缝配合，模拟各种导航动作。

你可以创建测试专用的导航容器，调用navigate、goBack等方法模拟跳转，然后断言当前屏幕是否正确渲染。比如测试新用户完整流程的示例代码：

import { render, screen, fireEvent } from '@testing-library/react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createTestStackNavigator } from '@react-navigation/testing';
import WelcomeScreen from '../screens/WelcomeScreen';
import LoginScreen from '../screens/LoginScreen';
import RegisterScreen from '../screens/RegisterScreen';
import MainAppScreen from '../screens/MainAppScreen';

const Stack = createTestStackNavigator();

test('新用户完整导航流程', () => {
  render(
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Welcome">
        <Stack.Screen name="Welcome" component={WelcomeScreen} />
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Register" component={RegisterScreen} />
        <Stack.Screen name="MainApp" component={MainAppScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );

  // 从Welcome页跳转到Login页
  fireEvent.press(screen.getByText('登录'));
  expect(screen.getByTestId('login-screen')).toBeTruthy();

  // 从Login页跳转到Register页
  fireEvent.press(screen.getByText('注册'));
  expect(screen.getByTestId('register-screen')).toBeTruthy();

  // 完成注册后跳转到MainApp页
  fireEvent.press(screen.getByText('完成注册'));
  expect(screen.getByTestId('main-app-screen')).toBeTruthy();
});

2. Cypress + Jest（端到端测试场景） #

如果是Web应用，或者想做更贴近真实用户操作的端到端测试，Cypress可以和Jest配合使用（也可单独用Cypress）。它能模拟真实浏览器行为，比如点击、填写表单，全程复刻用户操作路径，然后验证页面跳转是否正确。

比如测试主应用到个人资料页的示例：

describe('主应用到个人资料页导航', () => {
  it('点击个人资料图标成功跳转', () => {
    // 提前用Cypress session保存登录状态，避免重复登录
    cy.login();
    
    // 进入主应用后点击个人资料按钮
    cy.get('[data-testid="profile-button"]').click();
    
    // 断言个人资料页已加载
    cy.get('[data-testid="profile-screen"]').should('be.visible');
  });
});

3. React Testing Library + Jest（React Web场景） #

对于React Web应用，用react-router-dom的MemoryRouter配合React Testing Library，就能在Jest中模拟路由导航。你可以通过触发点击事件跳转，然后断言当前路径或页面内容是否正确。

示例代码：

import { render, screen, fireEvent } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import App from '../App';

test('主应用到个人资料页的导航验证', () => {
  render(
    <MemoryRouter initialEntries={['/main-app']}>
      <App />
    </MemoryRouter>
  );

  // 点击个人资料链接
  fireEvent.click(screen.getByText('我的资料'));
  
  // 断言个人资料页已渲染
  expect(screen.getByText('个人资料页面')).toBeInTheDocument();
});

额外小技巧 #

• 建议给每个屏幕/关键元素添加data-testid，这样测试时定位元素更稳定，避免依赖易变的文本内容。
• 涉及登录状态的流程，可以用Jest的mock功能模拟登录接口，或者在测试前预设好用户认证状态，不用每次都调用真实后端接口。

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