React组件测试报错：`useClient`必须在`WagmiConfig`中使用

核心原因 #

测试环境独立于_app.tsx，单独渲染组件时不会自动继承全局的Wagmi上下文，必须在测试用例中手动提供Wagmi配置包裹。

解决方案 #

1. 手动在测试中包裹WagmiConfig #

在测试用例里，用WagmiConfig包裹待测试组件，同时补上其他依赖的Provider（和_app.tsx中的结构对应）：

import { render } from '@testing-library/react'
import { WagmiConfig, createConfig, http } from 'wagmi'
import { sepolia } from 'wagmi/chains'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { StoreProvider } from '../path-to-your-store'
import YourComponent from '../path-to-your-component'

// 初始化测试用的Wagmi配置
const testWagmiConfig = createConfig({
  chains: [sepolia],
  transports: {
    [sepolia.id]: http(),
  },
})

const queryClient = new QueryClient()

test('组件渲染测试', () => {
  render(
    <StoreProvider store={yourTestStore}>
      <QueryClientProvider client={queryClient}>
        <WagmiConfig config={testWagmiConfig}>
          <YourComponent />
        </WagmiConfig>
      </QueryClientProvider>
    </StoreProvider>
  )

  // 这里添加你的断言逻辑
})

2. 直接模拟useAccount Hook（更轻量） #

如果不需要真实的链交互，用Jest模拟useAccount的返回值，跳过WagmiConfig的依赖：

jest.mock('wagmi', () => ({
  ...jest.requireActual('wagmi'),
  useAccount: () => ({
    address: '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
    isConnected: true,
    // 按需添加其他需要的字段
  }),
}))

test('模拟账户信息测试组件', () => {
  // 无需包裹WagmiConfig，直接渲染组件
  render(<YourComponent />)
  
  // 断言逻辑
})

3. 不推荐直接渲染_app.tsx #

直接渲染_app.tsx容易因为pageProps、session等全局依赖缺失报错，优先选择在测试中单独包裹必要的Provider。

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