3

我正在测试以下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 and Enzyme，我想click在AppBar's上模拟一个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因为根据React Dev Tools选项卡，这是呈现的图标按钮组件的名称。

4

2 回答 2

1

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

于 2016-07-14T10:53:32.003 回答
0

我找到了一种方法来测试函数是否被调用，而不是使用.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 对象或其子 _instance 对象中找到该方法.renderer._instance（取决于元素的深度），然后使用它sinon.spy来监视该方法。

我不喜欢这种方式，但这是迄今为止我知道如何监视方法的唯一方法。

于 2016-03-10T09:38:40.477 回答