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

时间:2016-02-10 12:55:22

标签: unit-testing testing reactjs material-ui enzyme

我正在测试以下Android Notification Developer Guide组件:

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

它由React组件组成。使用material-ui AppBarTape,我想模拟click AppBar上的IconButton

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,因为根据Enzyme标签,这是呈现的图标按钮组件的名称。

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

我找到了一种测试函数是否被调用的方法,而不是使用Sub saveimage() Set Sheet = ActiveSheet output = "F:\Invoices\" & Range("e8") & ".png" zoom_coef = 100 / Sheet.Parent.Windows(1).Zoom Dim sht As Worksheet Dim LastRow As Long Dim LastColumn As Long Dim StartCell As Range Set sht = Worksheets("Invoice") Set StartCell = Range("A1") 'Refresh UsedRange Worksheets("Invoice").UsedRange 'Find Last Row LastRow = sht.Cells.Find("*", SearchOrder:=xlByRows, SearchDirection:=xlPrevious).Row 'Select Range sht.Range("A1:N" & LastRow).Select Set area = Selection area.CopyPicture xlPrinter Set chartobj = Sheet.ChartObjects.Add(0, 0, area.Width * zoom_coef, area.Height * zoom_coef) chartobj.Chart.Paste chartobj.Chart.Export output, "png" chartobj.Delete End Sub ,只是直接调用该方法。

.simulate('event')

您可以在const wrapper = shallow(<NavBar />) //use sinon.spy( object, method) to spy the method, instead of sinon.spy(func) const spy = Sinon.spy(wrapper.renderer._instance._instance, 'click') //inovke wrapper.renderer._instance._instance.click() expect(spy.called).to.be.true 或其子_instance对象中找到该方法(取决于元素的深度),然后使用.renderer._instance监视此方法。

我不喜欢这种方式,但这是我知道如何窥探方法的唯一方法。