開始使用Enzyme和Jest測試React組件

Question

不幸的是，在我工作的地方，我們不對React Components進行單元測試。 由於我對這個行業也很陌生，所以我沒有經驗為軟件編寫單元測試。 這讓我在嘗試獨立學習時陷入了一種奇怪的困境，因為我在網上看到的例子要么解釋得不好，要么就不適合初學者。 我最近檢查了用酶和Jest測試React組件，並認為這種組合看起來很有希望。

我的目標是：我想找出正確的方法來測試React道具是否從父組件到子組件一直正常工作。 我正在使用Jest和Enzyme，因此解決方案應該使用這兩個模塊的最佳實踐。

為簡單起見，我想圍繞兩個示例組件提出這個問題。 而不是在現實世界中你永遠看不到的名字，讓我們假裝這些組件在串聯使用時會產生一個用戶列表到屏幕上。 組件將命名為：

1. UserList（父母）
2. 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的淺層渲染是首選方式。 我已經明白了它是如何工作的，但我真正想要的是對道具進行端到端的徹底測試。

此外，僅僅檢查React組件是否正在傳遞特定的道具名稱是否足夠？ 或者我們是否還需要創建一些帶有虛擬數據的偽數組來提供給子組件？

Answer 1

對於您當前的組件，我會編寫一個測試，以確保正確呈現狀態中的元素，例如：

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

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

我還會測試發送給孩子的數據是否正確。 在這種情況下， UserList的users狀態應該顯示在每個子UserListItem的props中。

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