React组件测试中useContext钩子报错问题求助

测试Search组件时抛出以下错误：

Error: Uncaught [TypeError: Cannot destructure property 'cityObj' of '_react.default.useContext(...)' as it is undefined.]

问题根源 #

Search组件本身不依赖CityContext，但它的子组件Select通过useContext(CityContext)获取上下文数据。单独渲染<Search />时，没有提供该上下文的Provider，导致useContext(CityContext)返回undefined，解构cityObj时触发类型错误。

解决方案 #

方案一：在测试中提供Context Provider

直接导入CityContext，用它的Provider包裹要测试的Search组件，传入符合结构的默认值：

import React from 'react'
import { render, fireEvent, waitFor, screen } from '@testing-library/react'
import '@testing-library/jest-dom'
import Search from './day8-weather2-search'
// 导入Main组件中定义的CityContext
import { CityContext } from './day8-weather1-main'

test('search tests', async () => {
  render(
    <CityContext.Provider value={{ 
      cityObj: 'Calgary', // 与Main组件初始值保持一致
      setCityObj: jest.fn() // 用jest mock函数替代真实的状态更新函数
    }}>
      <Search />
    </CityContext.Provider>
  )
  
  // 可在此添加具体测试逻辑，比如验证输入框、提交按钮行为
});

方案二：Mock子组件Select

如果测试仅聚焦Search组件的核心逻辑（比如输入、API请求），可以用jest.mock替换Select组件，隔离其上下文依赖：

import React from 'react'
import { render, fireEvent, waitFor, screen } from '@testing-library/react'
import '@testing-library/jest-dom'
import Search from './day8-weather2-search'

// Mock Select组件，返回一个简单的占位元素
jest.mock('./day8-weather3-select', () => () => <div data-testid="mocked-select"></div>)

test('search tests', async () => {
  render(<Search />)
  
  // 测试Search组件的输入逻辑
  const input = screen.getByTestId('subSearch')
  fireEvent.change(input, { target: { value: 'Toronto' } })
  expect(input).toHaveValue('Toronto')
});

方案选择建议 #

• 方案一适合需要测试Search与Select完整交互的场景，保留组件树完整性。
• 方案二更适合单独测试Search组件的核心功能，隔离子组件依赖，让测试更聚焦。

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