unit-testing - 如何在 `click` AppBar 的图标按钮上测试 `material-ui` 事件？

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 组成成分。使用Tape和 Enzyme ，我想在 AppBar 的 IconButton 上模拟一个click:

import NavBar from './NavBar'
import React from 'react'
import test from 'tape'
import { /* I don't know if it's `shallow` or `mount` */ } from 'enzyme'

test('NavBar component test', (assert) => {
  test('simulating a click on the icon button', (assert) =>
    // How do I do this?
    // The following results in error:
    // const wrapper = shallow(<NavBar />)
    // wrapper.find('AppBar').find('IconButton').simulate('click')
    assert.end()
  })
  assert.end()
})

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

Obs:我正在搜索 IconButton，因为根据 React Dev Tools选项卡，这是呈现的图标按钮组件的名称。

Answer 1

您应该使用mount 来测试组件顶层以下的组件。