unit-testing - 单元测试React组件功能

Question

我正在使用 react 编写一个 Web 应用程序。我对客户端测试不太熟悉，所以我仍在尝试弄清楚如何对我的组件进行单元测试。

我在 react 文档中看到，他们提供了 Test Utilities 来测试自定义 UI 组件，但我没有找到测试组件内部功能的方法。

我有一个表单，我想验证其中的字段，比如说验证电子邮件地址。如何测试该方法的功能？据我所知，人们只是测试 UI 组件本身。

Answer 1

这有点复杂，但这里有一个使用 skin-deep 的示例测试 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 组件之外，以避免这样做。