很遗憾,我所在的工作单位没有对React组件进行单元测试。由于我比较新进入这个行业,没有任何编写软件单元测试的经验。当我试图自学时,我陷入了尴尬的境地,因为我看到的例子要么解释不清楚,要么不适合初学者。最近我使用Enzyme和Jest测试React组件,并认为这种组合看起来很有前途。
我的目标是:我想找出从父组件到子组件的正确测试React属性的方法。我使用Jest和Enzyme,因此解决方案应使用这两个模块的最佳实践。
为了简化问题,我想围绕两个示例组件提出这个问题。让我们假装当这些组件一起使用时,它们会在屏幕上显示一个用户列表。这些组件将被命名为:
- UserList(父组件)
- UserListItem(子组件)
以下是UserList React组件。为了简化这个示例,我只将传递给子组件的数据放在本地状态中。让我们假设这些数据始终是一个对象数组。
import React, { Component } from 'react'
import UserListItem from './user-list-item'
export default class UserList extends Component {
constructor(props) {
super(props)
this.state = {
users: [
{
userName: 'max',
age: 24
},
{
userName: 'susan',
age: 28
}
]
}
}
renderUsers = (list) => {
return this.state.users.map(user => <UserListItem key={user.userName} user={user} />)
}
render() {
return (
<ul>
{this.renderUsers()}
</ul>
)
}
}
现在,这是子组件,UserListItem。
import React, { Component } from 'react'
const UserListItem = ({ user }) => {
return (
<li>
<div>
User: {user.userName}
</div>
<div>
Age: {user.age}
</div>
</li>
)
}
export default UserListItem
从阅读在线教程得知,使用Enzyme进行浅渲染(shallow rendering)是首选方法。我已经明白了其工作原理,但我真正需要的是对props的端到端(end to end)和全面(thorough)测试。
此外,仅检查React组件是否被传递了特定的prop名称是否足够?还是我们还需要创建一些包含虚假数据(dummy data)的假数组(fake array)来提供给子组件?
expect(cmp.find(UserList).props().user).toBe(user);
应该改为expect(cmp.find(UserListItem).props().user).toBe(user);
吗?否则你正在测试UserList
上的 props,而它没有任何 props。 - Jonathan Stray