开始使用Enzyme和Jest测试React组件-Java 学习之路

不幸的是，在我工作的地方，我们不对React Components进行单元测试 . 由于我对这个行业也很陌生，所以我没有经验为软件编写单元测试 . 这让我在尝试独立学习时陷入了一种奇怪的困境，因为我在网上看到的例子要么解释得不好，要么就不适合初学者 . 我最近检查了使用Enzyme和Jest测试React组件，并认为该组合看起来很有前景 .

My goal here is this: 我想找出正确的方法来测试React道具是否从父组件到子组件一直正常工作 . 我正在使用Jest和Enzyme，因此解决方案应该使用这两个模块的最佳实践 .

为简单起见，我想围绕两个示例组件提出这个问题 . 而不是在现实世界中你永远看不到的名字，让我们假设这些组件在串联使用时会产生一个用户列表到屏幕上 . 组件将命名为：

UserList（父母）
UserListItem（The Child）

这是 UserList React组件 . 为了有希望尝试简化这个例子，我只是把's going to be passed to the child in local state. Let'的数据假设这个数据永远是一个对象数组 .

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的浅层渲染是首选方式 . 我已经明白了它是如何工作的，但我真正想要的是对道具进行端到端的彻底测试 .

此外，仅仅检查React组件是否正在传递特定的道具名称是否足够？或者我们是否还需要创建一些带有虚拟数据的伪数组来提供给子组件？

1 回答

对于您当前的组件，我会编写一个测试，以确保正确呈现状态中的元素，例如：

it('should render two UserListItems', () => {
  const cmp = shallow(<UserList />);

  expect(cmp.find(UserList).length).toBe(2);
})

我还会测试发送给孩子的数据是否正确 . 在这种情况下， UserList 的 users 状态应显示在每个孩子的道具 UserListItem 中 .

it('should send the correct data', () => {
  const user = { userName: 'test', age: 22 };
  const cmp = shallow(<UserList />);
  cmp.setState({ users: [user] });

  expect(cmp.find(UserListItem).props().user).toBe(user);
})

对于UserListItem组件，我将测试正确呈现名称和年龄 .

it('should render name and age', () => {
  const user = { userName: 'test', age: 22 };
  const cmp = shallow(<UserListItem user={user} />);


  expect(cmp.find('div[children="User: test"]').length).toBe(1);
  expect(cmp.find('div[children="Age: 22"]').length).toBe(1);
})

回复于 2024-04-29T14:32:46+08:00

开始使用Enzyme和Jest测试React组件

1 回答

相关问题