I am testing a React component using Jest and need to mock data to override the default value of the provider. The issue I am having is that I cannot seem to structure the data properly to pass to the provider in my test.

Here is the test:

// 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()
})

I believe the mockData value in the test has to be changed. The error is thrown when I run the test and line 28 and 29 in the component get an undefined value the data overriding the provider is structured improperly.

Here is the component I am testing:

// import BlockButton from './blockButton';
import { useState, useContext } from 'react'
import { useHistory } from 'react-router-dom'
import dateformat from 'dateformat'
import { observer } from 'mobx-react-lite'

import UnirepContext from '../../context/Unirep'
import PostContext from '../../context/Post'

import { EXPLORER_URL } from '../../config'
import { Page, ButtonType } from '../../constants'
import BlockButton from './blockButton'
import MarkdownIt from 'markdown-it'

const markdown = new MarkdownIt({
    breaks: true,
    html: false,
    linkify: true,
})

type Props = {
    commentId: string
    page: Page
}

const CommentBlock = ({ commentId, page }: Props) => {
    const postContext = useContext(PostContext)
    const comment = postContext.commentsById[commentId]
    const commentHtml = markdown.render(comment.content)
    const unirepConfig = useContext(UnirepContext)
    const date = dateformat(new Date(comment.post_time), 'dd/mm/yyyy hh:MM TT')
    const history = useHistory()
    const [isEpkHovered, setEpkHovered] = useState<boolean>(false)

    const gotoPost = () => {
        if (page === Page.User) {
            history.push(`/post/${comment.post_id}`, { commentId: comment.id })
        }
    }

    return (
        <div className="comment-block">
            <div className="block-header comment-block-header no-padding">
                <div className="info">
                    <span className="date">{date} |</span>
                    <span
                        className="user"
                        onm ouseEnter={() => setEpkHovered(true)}
                        onm ouseLeave={() => setEpkHovered(false)}
                    >
                        Post by {comment.epoch_key}{' '}
                        <img
                            src={require('../../../public/images/lighting.svg')}
                        />
                        {isEpkHovered ? (
                            <span className="show-off-rep">
                                {comment.reputation ===
                                unirepConfig.commentReputation
                                    ? `This person is very modest, showing off only ${unirepConfig.commentReputation} Rep.`
                                    : `This person is showing off ${comment.reputation} Rep.`}
                            </span>
                        ) : (
                            <span></span>
                        )}
                    </span>
                </div>
                <a
                    className="etherscan"
                    target="_blank"
                    href={`${EXPLORER_URL}/tx/${comment.id}`}
                >
                    <span>Etherscan</span>
                    <img
                        src={require('../../../public/images/etherscan.svg')}
                    />
                </a>
            </div>
            <div
                className="block-content no-padding-horizontal"
                onClick={gotoPost}
            >
                <div
                    style={{
                        maxHeight: page == Page.Home ? '300px' : undefined,
                        overflow: 'hidden',
                    }}
                    dangerouslySetInnerHTML={{
                        __html: commentHtml,
                    }}
                />
            </div>
            <div className="block-buttons no-padding">
                <BlockButton
                    type={ButtonType.Boost}
                    count={comment.upvote}
                    data={comment}
                />
                <BlockButton
                    type={ButtonType.Squash}
                    count={comment.downvote}
                    data={comment}
                />
                <BlockButton type={ButtonType.Share} count={0} data={comment} />
            </div>
        </div>
    )
}

export default observer(CommentBlock)

CodePudding user response：

This was solved by properly mocking the data with this structure:

const postData = {
        commentsById: {
            commentId: {
                id: 'commentId',
                content: 'string',
                post_time: '00',
                reputation: 30,
                epoch_key: 'epoch_key test',
            },
        },
    }