面试题：React中如何使用Jest测试Hooks

Question

请描述在React项目里，使用Jest测试一个自定义Hooks的基本步骤，并给出一个简单自定义Hooks及其测试代码示例。

Answer 1

测试自定义 Hooks 的基本步骤

1. 安装依赖：确保项目中安装了 jest 和 @testing-library/react，@testing-library/react 用于测试 React 组件及 Hooks。
2. 导入必要模块：在测试文件中，导入 renderHook 等测试工具。renderHook 是 @testing-library/react 提供的用于测试 Hooks 的函数。
3. 定义测试用例：使用 Jest 的 describe 和 it 块来组织测试用例。describe 用于描述一组相关的测试，it 用于定义单个测试。
4. 调用自定义 Hooks 并断言结果：在 it 块中，通过 renderHook 调用自定义 Hooks，并使用 Jest 的断言函数（如 expect）来验证 Hooks 的返回值、副作用等是否符合预期。

自定义 Hooks 及其测试代码示例

1. 自定义 Hooks 代码（假设文件名为 useCounter.js）：

import { useState, useEffect } from'react';

const useCounter = (initialValue = 0) => {
    const [count, setCount] = useState(initialValue);

    useEffect(() => {
        document.title = `Count: ${count}`;
    }, [count]);

    const increment = () => {
        setCount(count + 1);
    };

    const decrement = () => {
        setCount(count - 1);
    };

    return {
        count,
        increment,
        decrement
    };
};

export default useCounter;

2. 测试代码（假设文件名为 useCounter.test.js）：

import { renderHook } from '@testing-library/react';
import useCounter from './useCounter';

describe('useCounter', () => {
    it('should initialize with the correct initial value', () => {
        const { result } = renderHook(() => useCounter(10));
        expect(result.current.count).toBe(10);
    });

    it('should increment the count', () => {
        const { result } = renderHook(() => useCounter());
        result.current.increment();
        expect(result.current.count).toBe(1);
    });

    it('should decrement the count', () => {
        const { result } = renderHook(() => useCounter(5));
        result.current.decrement();
        expect(result.current.count).toBe(4);
    });
});