React Native单元测试实战: 解构NavigationMore组件

在React Native开发中，单元测试是保证代码质量和可维护性的重要环节。本文将带你深入解析如何使用Jest测试框架对NavigationMore组件进行单元测试。

组件代码javascriptimport React, { useState } from 'react';import { View, Text, StyleSheet } from 'react-native';import Iconfont from '@assets/iconfont';import LColors from '@assets/Strings/LColors';import { getStatusBarHeight, screenHeight, screenWidth } from '@utils/layout';import { isBindPhone, getLoginState } from '@utils/auth';import RouteHelper from '@common/Web/RouteHelper';import { applyLoginPage } from '@utils/native';import LTouchableOpacity from './TouchAble/LTouchableOpacity';import LModal from 'imou-rn/dist/components/LModal';

export default (props) => { const iconMap = { home: { path: 'HomeScreen', icon: 'common_nav_home', label: '首页', }, category: { path: 'SortScreen', icon: 'common__moreinfo_cat', label: '分类', }, cart: { path: 'CartScreen', icon: 'common_nav__cart', label: '购物车', needLogin: true, }, order: { path: 'OrderHomeScreen', icon: 'common__moreinfo_order', label: '商城订单', needLogin: true, }, center: { path: 'MallCenter', icon: 'common__moreinfo_mallcenter', label: '我的商城', needLogin: true, }, coupon: { path: 'MyCouponScreen', icon: 'common_moreinfo_coupon', label: '优惠券', needLogin: true, }, }; const arr = props.list.map((item) => iconMap[item]); const [visible, setVisible] = useState(false); const handleJump = async (item) => { setVisible(false); const isLogin = await getLoginState(); if (item.needLogin && !isLogin) { applyLoginPage(); return; } if (item.needLogin) { const isBind = await isBindPhone(true); if (!isBind) return; } RouteHelper.navigate(item.path, props.navigation, null); }; return ( <> <LTouchableOpacity testID={'m_home_more_lo0c901'} sensorsDataParams={{ $element_id: 'm_home_more_lo0c9' }} trackInfo={{ screenName: 'HomeScreen', elementInfo: { $element_id: navigation/click_nav_more, }, }} onPress={() => { setVisible(!visible); }}> <LModal animationDuration={200} animateAppear onAnimationEnd={() => {}} animationType='slide-down' visible={visible} popup maskClosable wrapStyle={{ backgroundColor: 'red', zIndex: 999 }} maskStyle={{ width: screenWidth, height: screenHeight }} style={{ backgroundColor: 'transparent', zIndex: 999 }} bodyStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.8)', borderBottomLeftRadius: 15, borderBottomRightRadius: 15, paddingTop: props.top || 0, }} onClose={() => { setVisible(false); }}> <View style={[styles.contentWrapper, { paddingTop: props.top ? 0 : getStatusBarHeight() }]}> 功能直达 <LTouchableOpacity sensorsDataParams={{ $element_id: 'm_home_more_close_o0kj9' }} onPress={() => { setVisible(false); }}> {arr.map((item, index) => { return ( <LTouchableOpacity sensorsDataParams={{ $element_id: m_home_more_${index}_vd7m0 }} trackInfo={{ screenName: 'HomeScreen', elementInfo: { $element_id: navigation/click_nav_${index}, }, }} key={index} style={[styles.itemWrapper, index === 0 ? styles.first : '']} onPress={() => { handleJump(item); }}> {item.label} ); })} </> );};

测试代码javascriptimport React from 'react';import { View, Text } from 'react-native';import { render, fireEvent } from '@testing-library/react-native';import NavigationMore from '../NavigationMore';

test('NavigationMore组件渲染和交互测试', () => { const list = ['home', 'category', 'cart', 'order', 'center', 'coupon']; const navigation = { navigate: jest.fn(), }; const { getByTestId } = render();

// 检查组件是否正确渲染 const component = getByTestId('m_home_more_lo0c901'); expect(component).toBeTruthy();

// 检查模态框是否初始隐藏 const modal = getByTestId('navigation-modal'); // 需要给LModal组件添加testID='navigation-modal' expect(modal.props.visible).toBeFalsy();

// 检查用于打开模态框的TouchableOpacity是否被渲染 const touchableOpacity = getByTestId('m_home_more_lo0c901'); expect(touchableOpacity).toBeTruthy();

// 检查按下TouchableOpacity是否会切换模态框的可见性 fireEvent.press(touchableOpacity); expect(modal.props.visible).toBeTruthy();

// 检查用于关闭模态框的TouchableOpacity是否被渲染 const closeTouchableOpacity = getByTestId('m_home_more_close_o0kj9'); // 需要给关闭按钮的LTouchableOpacity组件添加testID='m_home_more_close_o0kj9' expect(closeTouchableOpacity).toBeTruthy();

// 检查按下关闭TouchableOpacity是否会隐藏模态框 fireEvent.press(closeTouchableOpacity); expect(modal.props.visible).toBeFalsy();

// 检查按下项目TouchableOpacity是否会触发handleJump函数 const itemTouchableOpacity = getByTestId('m_home_more_0_vd7m0'); // 需要给每个项目的LTouchableOpacity组件添加testID='m_home_more_${index}_vd7m0' fireEvent.press(itemTouchableOpacity); expect(navigation.navigate).toHaveBeenCalledTimes(1);}