Vitest测试含useState的React组件时出现useState读取空值错误

针对你遇到的「无效Hook调用警告」和「TypeError: Cannot read properties of null (reading 'useState')」问题，结合React 18.3.1和Vite环境，给出以下排查和解决步骤：

1. 校验Vitest的测试环境配置 #

确保vite.config.ts中正确配置了React所需的DOM环境，否则Hook无法在正确的上下文执行：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom', // 必须设置为jsdom，模拟浏览器DOM环境
    globals: true, // 可选，避免每次测试导入it/expect等全局方法
    setupFiles: './src/test/setup.ts', // 若有测试前置文件，确保路径正确
  },
})

2. 检查测试用例的组件渲染方式 #

绝对不能直接调用组件函数（比如ComponentWithState()），必须通过React Testing Library的render方法挂载组件，保证Hook运行在React上下文内：

错误示例： #

// 错误：直接调用组件，无React上下文
const comp = ComponentWithState()

正确示例： #

import { render, screen, fireEvent } from '@testing-library/react'
import ComponentWithState from './ComponentWithState'

test('测试增量功能', () => {
  render(<ComponentWithState />)
  const incrementBtn = screen.getByRole('button', { name: /增量/i })
  fireEvent.click(incrementBtn)
  expect(screen.getByText('Count: 1')).toBeInTheDocument()
})

3. 确保React与React DOM版本完全一致 #

即使日志显示React 18.3.1，也要检查package.json中react和react-dom版本是否完全匹配，版本不一致会导致Hook上下文异常：

{
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

执行npm install或yarn install同步版本后重新运行测试。

4. 排查重复的React实例 #

项目中存在多个React实例时，Hook会在错误的上下文执行。可以在测试中添加日志排查：

import React from 'react'
console.log('React实例路径:', require.resolve('react'))
console.log('useState是否为函数:', typeof React.useState === 'function')

如果输出多个不同的React路径，执行以下操作：

• 删除node_modules和package-lock.json/yarn.lock
• 重新安装依赖
• 检查是否有子项目或第三方依赖引入了重复的React

5. 检查测试前置文件（setup.ts） #

如果存在测试前置文件，确保没有错误mock或覆盖React全局对象。正确的前置文件示例（通常用于引入断言扩展）：

import '@testing-library/jest-dom/vitest'

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