19、自定义 Hooks 测试与 React 类组件迁移指南

自定义 Hooks 测试与 React 类组件迁移指南

1. 自定义 Hooks 测试

在开发 React 应用时，自定义 Hooks 能帮助我们复用逻辑，提升代码的可维护性。为确保这些 Hooks 能正常工作，我们需要对其进行测试。下面将详细介绍不同类型自定义 Hooks 的测试方法。

1.1 Counter Hook 测试

首先定义一个简单的 Counter Hook，包含增加计数和重置计数的功能：

function increment() {
    setCount((count) => count + 1)
}

function reset() {
    setCount(initialCount)
}

return { count, increment, reset }

接下来，我们按照以下步骤为 Counter Hook 编写单元测试：
1. 创建一个新的 src/hooks/counter.test.js 文件。
2. 在文件中导入必要的函数：

import { describe, test, expect } from 'vitest'
import { renderHook, act } from '@testing-library/react'
import { useCounter } from './counter.js'

3. 定义测试组和具体测试用例：

describe('Counter Hook', {}, () => {
    test('should return 0 by default', {}, () => {
        const { result } = renderHook(() => useCounter())
        expect(result.current.count).toBe(0)
    })

    test('should initially return initial count', {}, () => {
        const { result } = renderHook(() => useCounter(123))
        expect(result.current.count).toBe(123)
    })

    test('should increment counter when increment() is called', {}, () => {
        const { result } = renderHook(() => useCounter(0))
        act(() => result.current.increment())
        expect(result.current.count).toBe(1)
    })

    test('should reset to initial value', {}, () => {
        let initial = 0
        const { result, rerender } = renderHook(() => useCounter(initial))
        initial = 123
        rerender()
        act(() => result.current.reset())
        expect(result.current.count).toBe(123)
    })
})

4. 运行测试：

$ npm test

1.2 Theme Hook 测试

对于使用上下文的 Theme Hook，我们需要创建一个上下文包装器来进行测试：
1. 创建一个新的 src/hooks/theme.test.jsx 文件。
2. 导入必要的函数和上下文：

import { describe, test, expect } from 'vitest'
import { renderHook } from '@testing-library/react'
import { ThemeContext } from '@/contexts/ThemeContext.js'
import { useTheme } from './theme.js'

3. 定义上下文包装器组件：

function ThemeContextWrapper({ children }) {
    return (
        <ThemeContext.Provider value={{ primaryColor: 'deepskyblue' }}>
            {children}
        </ThemeContext.Provider>
    )
}

4. 编写测试用例：

describe('Theme Hook', {}, () => {
    test('should return the primaryColor defined by the context', {}, () => {
        const { result } = renderHook(() => useTheme(), {
            wrapper: ThemeContextWrapper,
        })
        expect(result.current.primaryColor).toBe('deepskyblue')
    })
})

5. 运行测试：

$ npm test

1.3 User Hook 测试

User Hook 内部使用了本地存储 Hook， jsdom 环境会自动模拟 LocalStorage API ，无需额外设置：
1. 创建一个新的 src/hooks/user.test.js 文件。
2. 导入必要的函数：

import { describe, test, expect } from 'vitest'
import { renderHook, act } from '@testing-library/react'
import { useUser } from './user.js'

3. 定义测试组和测试用例：

describe('User Hook', {}, () => {
    test('should not be logged in by default', {}, () => {
        const { result } = renderHook(() => useUser())
        expect(result.current.isLoggedIn).toBe(false)
        expect(result.current.username).toBe(null)
    })

    test('should be logged in after registering', {}, () => {
        const { result } = renderHook(() => useUser())
        act(() => result.current.register('testuser'))
        expect(result.current.isLoggedIn).toBe(true)
        expect(result.current.username).toBe('testuser')
    })

    test('should be logged in after logging in', {}, () => {
        const { result } = renderHook(() => useUser())
        act(() => result.current.login('testuser'))
        expect(result.current.isLoggedIn).toBe(true)
        expect(result.current.username).toBe('testuser')
    })

    test('should be logged out after logout', {}, () => {
        const { result } = renderHook(() => useUser())
        act(() => result.current.login('testuser'))
        act(() => result.current.logout())
        expect(result.current.isLoggedIn).toBe(false)
        expect(result.current.username).toBe(null)
    })
})

4. 运行测试：

$ npm test

1.4 异步 Hooks 测试

对于执行异步操作的 Hooks，我们可以使用 waitFor 函数来测试：
1. 创建一个新的 src/hooks/debouncedHistoryState.test.js 文件。
2. 导入必要的函数：

import { describe, test, expect } from 'vitest'
import { renderHook, act, waitFor } from '@testing-library/react'
import { useDebouncedHistoryState } from './debouncedHistoryState.js'

3. 定义测试组和测试用例：

describe('Debounced History State Hook', {}, () => {
    test('should return initial state as content', {}, () => {
        const { result } = renderHook(() => useDebouncedHistoryState('', 10))
        expect(result.current.content).toBe('')
    })

    test('should update content immediately', {}, () => {
        const { result } = renderHook(() => useDebouncedHistoryState('', 10))
        act(() => result.current.handleContentChange({ target: { value: 'new content' } }))
        expect(result.current.content).toBe('new content')
    })

    test('should only update history state after debounce', {}, async () => {
        const { result } = renderHook(() => useDebouncedHistoryState('', 10))
        act(() => result.current.handleContentChange({ target: { value: 'new content' } }))
        expect(result.current.canUndo).toBe(false)
        await waitFor(() => {
            expect(result.current.canUndo).toBe(true)
        })
    })
})

4. 运行测试：

$ npm test

2. React 类组件迁移

在了解了自定义 Hooks 的测试方法后，我们将学习如何从 React 类组件迁移到 Hooks。首先，我们需要使用 React 类组件实现一个待办事项应用，然后将其迁移到 Hooks。

2.1 技术要求

• 安装较新版本的 Node.js 和 npm。
• 推荐使用 Visual Studio Code 进行开发。

工具	版本
Node.js	v22.14.0
npm	v10.9.2
Visual Studio Code	v1.97.2

2.2 设计应用结构

在开始迁移之前，我们需要设计待办事项应用的结构：
1. 绘制应用界面的原型图，包含以下元素：
- 一个标题
- 添加新待办事项的方式
- 显示所有待办事项的列表
- 待办事项的过滤器
2. 根据原型图，划分简单的组件并命名。

通过以上步骤，我们可以更好地理解 React 类组件和 Hooks 的差异，从而更顺利地进行迁移。在实际项目中，合理使用自定义 Hooks 能提高代码的可维护性和复用性，而对 Hooks 进行充分的测试则能确保其稳定性。同时，掌握从类组件到 Hooks 的迁移方法，能让我们更好地适应 React 的发展趋势。

3. 迁移步骤

将 React 类组件应用迁移到 Hooks 可以按照以下步骤进行，下面以之前设计的待办事项应用为例进行说明。

3.1 处理状态

在 React 类组件中，状态通常在 constructor 中初始化，并通过 this.state 来访问和更新。例如：

class TodoApp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            todos: [],
            newTodo: ''
        };
    }

    // 其他方法
}

迁移到 Hooks 时，我们使用 useState 钩子来管理状态。改写后的代码如下：

import React, { useState } from 'react';

const TodoApp = () => {
    const [todos, setTodos] = useState([]);
    const [newTodo, setNewTodo] = useState('');

    // 其他逻辑
    return (
        // JSX 代码
    );
};

export default TodoApp;

3.2 生命周期方法

类组件中有多个生命周期方法，如 componentDidMount 、 componentDidUpdate 和 componentWillUnmount 。在 Hooks 中，我们使用 useEffect 来处理这些逻辑。

componentDidMount 迁移 ：
类组件中：

class TodoApp extends React.Component {
    componentDidMount() {
        // 初始化数据或订阅事件
    }
}

Hooks 中：

const TodoApp = () => {
    useEffect(() => {
        // 初始化数据或订阅事件
        return () => {
            // 清理操作，对应 componentWillUnmount
        };
    }, []); // 空依赖数组表示只在组件挂载时执行
};

componentDidUpdate 迁移 ：
类组件中：

class TodoApp extends React.Component {
    componentDidUpdate(prevProps, prevState) {
        if (prevState.todos!== this.state.todos) {
            // 处理状态更新逻辑
        }
    }
}

Hooks 中：

const TodoApp = () => {
    const [todos, setTodos] = useState([]);

    useEffect(() => {
        // 处理状态更新逻辑
    }, [todos]); // 依赖数组包含 todos，当 todos 变化时执行
};

3.3 方法迁移

类组件中的方法通常使用 this 来访问状态和其他方法。在 Hooks 中，我们可以使用普通函数来替代。

类组件中：

class TodoApp extends React.Component {
    addTodo = () => {
        this.setState(prevState => ({
            todos: [...prevState.todos, this.state.newTodo],
            newTodo: ''
        }));
    };
}

Hooks 中：

const TodoApp = () => {
    const [todos, setTodos] = useState([]);
    const [newTodo, setNewTodo] = useState('');

    const addTodo = () => {
        setTodos(prevTodos => [...prevTodos, newTodo]);
        setNewTodo('');
    };

    return (
        // JSX 代码
    );
};

4. 权衡与总结

在使用 React 类组件和 Hooks 时，各有其优缺点，下面是一个简单的对比表格：
| 对比项 | React 类组件 | React Hooks |
| ---- | ---- | ---- |
| 状态管理 | 通过 this.state 和 this.setState ，逻辑分散 | 使用 useState 和 useReducer ，逻辑集中 |
| 生命周期方法 | 多个生命周期方法，代码复杂 | 使用 useEffect 统一处理，代码简洁 |
| 代码复用 | 高阶组件和 render props 复用性有限 | 自定义 Hooks 复用性强 |
| 学习曲线 | 较高，需要理解 this 和生命周期 | 相对较低，易于上手 |

综上所述，React Hooks 提供了更简洁、更灵活的方式来编写 React 组件，尤其在状态管理和逻辑复用方面具有明显优势。而 React 类组件在一些旧项目中仍然广泛使用，并且对于一些复杂的生命周期逻辑，类组件可能更容易理解。在实际开发中，我们可以根据项目的需求和团队的技术栈来选择合适的方案。

在迁移过程中，我们要逐步将类组件替换为 Hooks 组件，确保每一步的迁移都是稳定的。同时，对迁移后的代码进行充分的测试，以保证应用的功能不受影响。通过不断实践和总结，我们可以更好地掌握 React 类组件和 Hooks 的使用，提高开发效率和代码质量。

下面是一个简单的迁移流程图：

graph LR;
    A[开始] --> B[设计应用结构];
    B --> C[使用类组件实现应用];
    C --> D[处理状态迁移];
    D --> E[生命周期方法迁移];
    E --> F[方法迁移];
    F --> G[测试与优化];
    G --> H[完成迁移];

通过以上步骤和分析，我们可以顺利地从 React 类组件迁移到 Hooks，享受 Hooks 带来的便利和优势。在未来的开发中，我们可以更加灵活地运用 React 技术，构建出高质量的应用程序。