單元測試反應組件功能

Question

我正在使用react編寫一個Web應用程序。 我對客戶端測試不是很熟悉，因此我仍在嘗試找出如何對組件進行單元測試。

我在react文檔中看到他們提供了Test Utilities來測試自定義UI組件，但是我沒有找到測試組件內部功能的方法。

我有一個要驗證字段的表格，可以說驗證電子郵件地址。 如何測試此方法的功能？ 從我所看到的，人們只是測試UI組件本身。

Answer 1

這有點令人費解，但這是一個使用皮膚深度測試React組件內部功能的示例。

組件文件：

export default React.createClass({
  validate(input) {
    return true
  },
  render() {
    if (validate(this.props.input)) {
      return <div>Valid!</div>
    }
    return <div>Not Valid!</div>
  }
})

測試文件：

import React from 'react'
import sd from 'skin-deep'
import Component from 'Component.jsx'

let tree = sd.shallowRender(React.createElement(Component, {}))
const instance = tree.getMountedInstance()

// Now you can run tests on instance functions.
assert instance.validate(foo) === true

我們一直在將要測試的功能放在React組件之外，以避免這樣做。