19、React 应用测试全攻略：从基础到高级技巧

React 应用测试全攻略：从基础到高级技巧

在 React 应用开发中，测试是确保应用稳定、可靠运行的关键环节。本文将详细介绍 React 应用中多种测试方法，包括过滤器动作生成器测试、费用选择器测试、过滤器和费用 reducer 测试、快照测试、Enzyme 测试以及动态组件的快照测试和 Jest 模拟库的使用。

过滤器动作生成器测试

在 React - Redux 应用中，测试过滤器动作生成器至关重要。通过为每个动作生成器创建测试，能确保过滤器正常工作，使应用稳定可靠。使用 Jest 这样的测试框架，可轻松编写和运行这些测试，在开发早期捕获错误。

费用选择器测试

一个设计良好的 React 应用应能以简洁、有序的方式管理状态。借助 Redux 和 React Hooks，我们能更好地管理状态并提高代码复用性。费用选择器函数 getVisibleExpenses 负责根据传入的过滤器计算并返回费用数组。

export const getVisibleExpenses = (expenses, { text, sortBy, startDate, endDate }) => {
  return expenses.filter((expense) => {
    const startDateMatch = typeof startDate!== 'number' || expense.createdAt >= startDate;
    const endDateMatch = typeof endDate!==