Expo React Native Web组件测试时useState/useEffect调用失败

核心问题 #

你在测试代码里直接把组件当作普通函数调用了：

render(timePickerWeb(testDate, mockSetEventDate))

React组件必须通过JSX语法传递props，直接调用函数会跳过React的组件渲染上下文，导致useState/useEffect这类Hook无法在正确的环境下执行，触发"Invalid hook call"错误。

修复步骤 #

修改测试代码，改用JSX方式传递props：

import { screen, render } from '@testing-library/react-native'; // 注意原代码拼写错误："form" → "from"
import timePickerWeb from './timePickerWeb'

it('renders the web picker', () => {
  const mockSetEventDate = jest.fn();
  const testDate = new Date(1680854389743);
  // 用JSX语法渲染组件并传递props
  const tree = render(<timePickerWeb date={testDate} setDate={mockSetEventDate} />).toJSON();
  expect(tree).toMatchSnapshot();
  expect(screen.getByTestId('webTimePicker')).toBeTruthy();
});

额外优化建议 #

1. 组件命名规范：React组件建议使用PascalCase命名（比如TimePickerWeb而非timePickerWeb），小写开头的组件在JSX中会被识别为HTML原生标签，可能引发渲染问题。修改命名后，测试中的JSX也要对应改为<TimePickerWeb />。
2. 日期对象的引用问题：组件里let newdate = date是直接引用原Date对象，修改newdate.setHours会直接修改传入的date参数，建议创建新的Date对象避免污染原数据：

useEffect(() => {
  const newDate = new Date(date);
  newDate.setHours(parseInt(hours));
  setDate(newDate);
}, [hours])

内容的提问来源于stack exchange，提问作者Ray