React Native测试配置终极指南：Jest与React Testing Library完整实战

React Native测试配置终极指南Jest与React Testing Library完整实战【免费下载链接】react-native-boilerplateA React Native template for building solid applications , using JavaScript or Typescript (you choose).项目地址: https://gitcode.com/gh_mirrors/re/react-native-boilerplateReact Native测试配置是确保移动应用质量的关键环节。本文将深入探讨React Native Boilerplate项目中的测试配置展示如何使用Jest和React Testing Library进行完整的单元测试和集成测试。无论你是React Native新手还是经验丰富的开发者这篇完整实战指南都将帮助你构建可靠的测试体系。 项目测试架构概览React Native Boilerplate项目采用了现代化的测试架构集成了Jest、React Testing Library和TypeScript支持。项目结构清晰测试文件与源码文件紧密对应便于维护和理解。核心测试配置文件位于template/jest.config.js这个配置文件定义了测试的基本设置module.exports { collectCoverageFrom: [ rootDir/src/Components/**/*.{jsx, tsx}, rootDir/src/App.{jsx, tsx}, ], coverageReporters: [html, text, text-summary, cobertura], moduleFileExtensions: [ts, tsx, js, jsx, json], preset: react-native, setupFiles: [./node_modules/react-native-gesture-handler/jestSetup.js], setupFilesAfterEnv: [rootDir/jest.setup.js], testMatch: [**/*.test.ts?(x), **/*.test.js?(x)], transformIgnorePatterns: [ node_modules/(?!(jest-)?react-native|react-native|react-native-community|react-navigation|ky), ], }; 测试环境配置详解依赖包安装项目的template/package.json中包含了完整的测试依赖Jest: 主测试框架版本30.2.0testing-library/react-native: React Native测试库版本13.2.2types/jest: Jest类型定义版本30.0.0react-test-renderer: React测试渲染器版本19.2.3eslint-plugin-testing-library: 测试库的ESLint插件测试脚本配置项目提供了多个测试相关的npm脚本{ scripts: { test: jest, test:report: jest --collectCoverage --coverageDirectory\./coverage\ --ci --reportersdefault --reportersjest-junit --coverage } }Mock文件配置项目中的template/src/tests/__mocks__/目录包含了必要的mock配置libs/index.ts: 导入React Native相关库的mocklibs/react-native-safe-area-context.ts: 安全区域上下文mocklibs/react-native-reanimated.ts: Reanimated动画库mockgetAssetsContext.ts: 资源上下文mock 组件测试实战Skeleton组件测试示例让我们看看template/src/components/atoms/Skeleton/Skeleton.test.tsx中的测试实现import { render, screen } from testing-library/react-native; import { Text } from react-native; import TestAppWrapper from /tests/TestAppWrapper; import SkeletonLoader from ./Skeleton; const WAIT 800; describe(SkeletonLoader, () { beforeAll(() { jest.useFakeTimers(); }); it(renders children when not loading, () { render( SkeletonLoader loading{false} TextLoaded Content/Text /SkeletonLoader, { wrapper: TestAppWrapper, }, ); expect(screen.getByText(Loaded Content)).toBeTruthy(); }); it(renders skeleton when loading, () { render(SkeletonLoader loading /, { wrapper: TestAppWrapper, }); const skeleton screen.getByTestId(skeleton-loader); jest.advanceTimersByTime(WAIT); expect(skeleton).toBeTruthy(); }); });测试包装器配置template/src/tests/TestAppWrapper.tsx提供了统一的测试环境包装import { QueryClientProvider } from tanstack/react-query; import { type PropsWithChildren } from react; import { GestureHandlerRootView } from react-native-gesture-handler; import { ThemeProvider } from /theme; import /translations; import { queryClient, storage } from ../App; function TestAppWrapper({ children }: PropsWithChildren) { return ( GestureHandlerRootView QueryClientProvider client{queryClient} ThemeProvider storage{storage}{children}/ThemeProvider /QueryClientProvider /GestureHandlerRootView ); } 屏幕组件测试实践Example屏幕测试template/src/screens/Example/Example.test.tsx展示了完整的屏幕组件测试import { QueryClient, QueryClientProvider } from tanstack/react-query; import { fireEvent, render, screen } from testing-library/react-native; import { I18nextProvider } from react-i18next; import { createMMKV, MMKV } from react-native-mmkv; import { SafeAreaProvider } from react-native-safe-area-context; import { SupportedLanguages } from /hooks/language/schema; import { ThemeProvider } from /theme; import i18n from /translations; import Example from ./Example; describe(Example screen should render correctly, () { let storage: MMKV; const queryClient new QueryClient({ defaultOptions: { mutations: { gcTime: Infinity, }, queries: { gcTime: Infinity, retry: false, }, }, }); beforeAll(() { storage createMMKV(); }); test(the user change the language, () { const component ( SafeAreaProvider ThemeProvider storage{storage} I18nextProvider i18n{i18n} QueryClientProvider client{queryClient} Example / /QueryClientProvider /I18nextProvider /ThemeProvider /SafeAreaProvider ); render(component); expect(i18n.language).toBe(SupportedLanguages.FR_FR); const button screen.getByTestId(change-language-button); expect(button).toBeDefined(); fireEvent.press(button); expect(i18n.language).toBe(SupportedLanguages.EN_EN); }); test(the user change the theme, () { const component ( SafeAreaProvider ThemeProvider storage{storage} I18nextProvider i18n{i18n} QueryClientProvider client{queryClient} Example / /QueryClientProvider /I18nextProvider /ThemeProvider /SafeAreaProvider ); render(component); expect(storage.getString(theme)).toBe(default); const button screen.getByTestId(change-theme-button); expect(button).toBeDefined(); fireEvent.press(button); expect(storage.getString(theme)).toBe(dark); }); }); 最佳实践总结1. 测试文件组织测试文件与源码文件同名添加.test.tsx后缀测试文件与源码文件位于同一目录使用描述性的测试描述和断言2. 测试环境配置使用统一的TestAppWrapper包装器配置必要的mock文件设置适当的超时和异步处理3. 测试覆盖范围组件渲染测试用户交互测试状态管理测试异步操作测试4. 性能优化使用jest.useFakeTimers()处理定时器合理使用beforeAll、beforeEach等钩子避免不必要的重复渲染 测试覆盖率报告项目配置了完整的测试覆盖率报告支持多种输出格式HTML格式生成可视化的覆盖率报告文本格式命令行输出Cobertura格式CI/CD集成运行yarn test:report命令可以生成详细的覆盖率报告帮助识别测试覆盖不足的区域。 调试技巧使用Reactotron项目集成了Reactotron进行调试配置文件位于template/src/reactotron.config.ts。在测试环境中可以结合Reactotron进行更深入的调试。测试日志在测试运行过程中可以通过以下方式查看详细日志yarn test --verbose 持续集成配置虽然项目本身没有提供CI配置文件但基于现有的测试配置可以轻松集成到常见的CI/CD平台GitHub Actions: 配置Node.js环境运行测试命令GitLab CI: 使用Docker镜像执行测试套件Jenkins: 配置构建流水线包含测试阶段 实用建议编写可测试的组件保持组件职责单一便于测试使用测试ID为交互元素添加testID属性模拟外部依赖使用Jest的mock功能模拟API调用测试边界情况包括错误状态、空状态、加载状态等保持测试独立每个测试应该独立运行不依赖其他测试的状态通过遵循React Native Boilerplate项目的测试配置和实践你可以构建出健壮、可靠的React Native应用测试体系。这个模板项目为你提供了一个优秀的起点展示了如何在真实项目中实施测试最佳实践。【免费下载链接】react-native-boilerplateA React Native template for building solid applications , using JavaScript or Typescript (you choose).项目地址: https://gitcode.com/gh_mirrors/re/react-native-boilerplate创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考