您如何在 Jest 中模拟提供商的数据？- "Input data should be a String"

Question

我正在使用Jest测试一个React组件，需要模拟数据来覆盖提供者的默认值。我遇到的问题是，在我的测试中，我似乎无法正确地构建数据以传递给提供程序。

测试如下:

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

我认为测试中的mockData值必须更改。当我运行测试并且组件中的第28行和第29行得到一个未定义的值时抛出错误，覆盖提供程序的数据结构不正确。

下面是我要测试的组件:

// 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"
onMouseEnter={() => setEpkHovered(true)}
onMouseLeave={() => 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)

Answer 1

这个问题可以通过使用以下结构正确模拟数据来解决:

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