如何预置prop(登录用户)为React组件单元测试?

Question

我对测试React应用程序相当陌生，提前感谢您的时间回答一个新手问题。

所以我一直在学习Full Stack Open的教程，并遇到了为React编写测试的挑战。有一个组件Blog，它从App中获取一些道具;博客列表>博客，包括一个名为"user"的博客，它是从登录函数返回的对象，存储用户名和令牌等。

在博客的JSX中，有一个"删除"按钮，只显示给登录的用户，它的风格由一个函数决定，该函数比较了博客的原始海报的用户名和当前登录用户的用户名。

现在我没有为用户名比较函数编写测试，但它只是在方式，因为我似乎不能设置一个值为"用户"传递到博客组件，这个错误在测试期间返回:

display: blog.user.username === user.username ? '' : 'none'
^
TypeError: Cannot read properties of undefined (reading 'username')

下面是Blog组件的代码和当前状态下的测试:

import { useState } from 'react'
const Blog = ({ blog, addLike, deleteBlog, user }) => {
const [showDetails, setShowDetails] = useState(false)
const showWhenDetailsTrue = { display: showDetails ? '' : 'none' }
const toggleDetails = () => {
setShowDetails(!showDetails)
}
const postedBySelf = async () => {
const style = await {
display: blog.user.username === user.username ? '' : 'none',
}
return style
}
return (
<div style={blogStyle}>
<div>
{blog.title} {blog.author}{' '}
<button onClick={toggleDetails}>{showDetails ? 'hide' : 'view'}</button>
</div>
<div style={showWhenDetailsTrue} className="defaultHidden">
<div>{blog.url}</div>
<div>
likes {blog.likes}
<button onClick={() => addLike(blog.id)}>like</button>
</div>
<div>{blog.author}</div>
<button onClick={() => deleteBlog(blog)} style={postedBySelf()}>
remove
</button>
</div>
</div>
)
}
export default Blog

测试文件:

import React from 'react'
import '@testing-library/jest-dom/extend-expect'
import { render, screen } from '@testing-library/react'
import Blog from './Blog'
test('renders title and author, but not url or number of likes by default', async () => {
const blog = {
title: 'Blog title',
author: 'Blog author',
url: 'Blog url',
user: {
username: 'mockuser',
},
}
await render(<Blog blog={blog} user={{ username: 'mockuser' }} />)
screen.getByText('Blog title', { exact: false })
screen.getAllByText('Blog author', { exact: false })
const { container } = render(<Blog blog={blog} />)
const div = container.querySelector('.defaultHidden')
expect(div).toHaveStyle('display: none')
})

当postedBySelf函数和相关内容被注释掉时，测试就通过了。我的问题是，如何模拟"用户"对象并在测试期间将其传递到组件中?我不明白为什么它是未定义的，即使我显式声明了它的值。

再次感谢您的时间，并感谢您的建议。

Answer 1

终于发现了我的错误，不得不在博客的第二次渲染中传递用户。

我不太确定我是否错过了关于这个主题的关键知识，但是这个教程解释得很好，并帮助我在某种程度上发现了问题。强烈推荐:https://www.youtube.com/watch?v=OVNjsIto9xM