🔧 jest 关于定时器

// TimerComponent.test.jsx
import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import TimerComponent from './TimerComponent';

test('updates message after timer completes', () => {
  // 使用假定时器
  jest.useFakeTimers();

  // 渲染组件
  render(<TimerComponent />);

  // 初始消息应该是 "Waiting..."
  expect(screen.getByText('Waiting...')).toBeInTheDocument();

  // 快进所有定时器
  jest.runAllTimers();

  // 断言定时器完成后消息更新
  expect(screen.getByText('Timer Completed!')).toBeInTheDocument();
});

// TimerComponent.jsx
import React, { useState, useEffect } from 'react';

const TimerComponent = () => {
  const [message, setMessage] = useState('Waiting...');

  useEffect(() => {
    const timer = setTimeout(() => {
      setMessage('Timer Completed!');
    }, 3000);

    return () => clearTimeout(timer);
  }, []);

  return <div>{message}</div>;
};

export default TimerComponent;