开始使用Enzyme和Jest测试React组件 [英] Getting started testing React components with Enzyme and Jest

问题描述

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

Unfortunately, where I am working, we do not do unit tests on React Components. As I am fairly new to the industry as well, I have no experience whatsoever writing unit tests for software. This puts me in an odd predicament when trying to learn on my own, as the examples I have seen online are either poorly explained, or just not meant for beginners. I recently checked out testing React Components with Enzyme and Jest, and thought the combination looked promising.

我的目标是这样:我想找出正确的方法来测试React道具在从父组件到子组件的整个过程中是否正常工作.我正在使用Jest和Enzyme，因此该解决方案应在这两个模块中使用最佳做法.

My goal here is this: I would like to find out the correct way to test if React props are working correctly all the way from the parent to the child component. I am using Jest and Enzyme, so the solution should use best practices with these two modules.

为简单起见，我想围绕两个示例组件提出这个问题.让我们假装这些组件在串联使用时会产生屏幕上的用户列表，而不是您在现实世界中从未见过的名称.这些组件将被命名为:

For simplicity's sake, I wanted to pose this question around two example components. Instead of names you would never see in the real world, let's pretend that these components when used in tandem, will produce a list of users to the screen. The components will be named:

1. 用户列表(父级)
2. UserListItem(孩子)

这里是 UserList React组件.为了希望简化此示例，我只是将要传递给孩子的数据置于本地状态.假设此数据将始终是对象数组.

Here is the UserList React component. To hopefully try to simplify this example, I just put the data that's going to be passed to the child in local state. Let's assume that this data will always be an array of objects.

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进行浅层渲染是首选方法.我已经知道它是如何工作的，但是我真正想要的是对这些道具进行端到端的全面测试.

From reading various tutorials online, I see that shallow rendering via Enzyme is the preferred way to go. I already understand how that works, but what I am really looking for is an end to end and thorough test of the props.

此外，仅检查React组件是否正在传递特定的prop名称就足够了吗?还是我们还需要创建一种带有伪数据的假数组以提供给子组件?

Also, is it enough to just check if a React component is being passed a specific prop name? Or do we also need to create some type of fake array with dummy data in it to give to the child component?

推荐答案

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

For your current component I'd write a test that makes sure the elements on the state are being rendered correctly, for example:

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

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

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

I'd also test if the data sent to the children is correct. In this case the users state of UserList should show up in the props of each child 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组件，我将测试名称和年龄是否正确显示.

For the UserListItem component, I'd tests that the name and age are being rendered correctly.

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);
})

这篇关于开始使用Enzyme和Jest测试React组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！