如何在Jest中为React Provider模拟数据？数据结构问题排查

测试React的CommentBlock组件时，需要通过PostContext.Provider覆盖默认数据，但当前模拟的数据结构不正确，导致组件第28、29行出现undefined报错。

原测试代码 #

// mocked props
const commentId = 'commentId'
const page = '/user'

// mocked data for provider
const mockData = {
    commentsById: {
        commentId: 'string',
    },
}

test('should render CommentBlock correctly with props', () => {
    render(
        <PostContext.Provider value={mockData}>
            <CommentBlock commentId={commentId} page={page} />
        </PostContext.Provider>
    )
    screen.debug()
})

组件核心依赖分析 #

组件通过postContext.commentsById[commentId]获取评论对象，会访问以下属性：

• content：用于Markdown渲染
• post_time：用于日期格式化
• post_id、id：用于页面跳转和Etherscan链接
• epoch_key、reputation：用于用户信息展示
• upvote、downvote：用于按钮计数
  同时组件还依赖UnirepContext获取commentReputation配置项。

解决方案：完善模拟数据结构 #

修改mockData为组件所需的完整对象结构，并补充UnirepContext的模拟：

// mocked props
const commentId = 'commentId'
const page = '/user'

// 模拟PostContext需要的完整评论数据结构
const mockData = {
    commentsById: {
        [commentId]: {
            content: '测试评论内容',
            post_time: Date.now(),
            post_id: 'testPostId',
            id: commentId,
            epoch_key: '0x123456',
            reputation: 100,
            upvote: 5,
            downvote: 1,
        },
    },
}

// 模拟UnirepContext的配置
const mockUnirepConfig = {
    commentReputation: 100,
}

test('should render CommentBlock correctly with props', () => {
    render(
        <UnirepContext.Provider value={mockUnirepConfig}>
            <PostContext.Provider value={mockData}>
                <CommentBlock commentId={commentId} page={page} />
            </PostContext.Provider>
        </UnirepContext.Provider>
    )
    screen.debug()
})

修改说明 #

1. 将mockData.commentsById[commentId]从字符串改为对象，包含组件用到的所有必填属性
2. 使用计算属性[commentId]确保键名与传入的commentId变量一致
3. 新增UnirepContext.Provider的模拟，解决组件对该上下文的依赖

修改后组件可正确获取所有所需属性，避免undefined报错。

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