unit-testing - 如何测试一个 React 组件是否包含另一个带有 Tape 和 Enzyme 的组件？

Question

假设我有以下 React组件:

import React from 'react'
import AppBar from 'material-ui/lib/app-bar'

class NavBar extends React.Component {
  render () {
    return (
      <div>
        <AppBar
          title='My NavBar Title'
        />
      </div>
    )
  }
}

export default NavBar

我想设置一个测试来确保用户看到 material-ui AppBar当呈现 NavBar 时，使用 Tape和 Enzyme为此:

import NavBar from './NavBar'
import React from 'react'
import test from 'tape'
// import { I don't know exactly what to import here. Maybe `shallow`? } from 'enzyme'

test('NavBar component test', (assert) => {
  test('I should see an AppBar', (assert) => {
    // How can I test for it?
    // Also, can I test only for the presence of `AppBar`, without
    // necessarily for the overriding of props? For example,
    // even if I actually have <AppBar title='My NavBar title' />,
    // can I test only for `AppBar`?
    assert.end()
  })
  assert.end()
})

我怎样才能正确地做到这一点？

Answer 1

我明白了。它是:

test('I should see one AppBar', (assert) => {
  const wrapper = shallow(<NavBar />)
  assert.equal(wrapper.find('AppBar').length === 1, true)
  assert.end()
})

shallow enzyme 中的函数返回一个包含方法 find 的包装器. find 返回一个具有属性 length 的对象。如果我的组件中有两个 AppBar，length 将等于 2，因此我可以测试它的 === 1 完成我的测试。