4

次の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

そして、 TapeとEnzymeを使用して、レンダリング時にマテリアル UI AppBarがユーザーに表示されることを確認するテストを設定したいと思います。NavBar

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()
})

どうすれば適切に行うことができますか？

4

2 に答える 2

16

わかった。それは：

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

shallow関数 fromはenzyme、メソッドを持つラッパーを返しますfind。findプロパティを持つオブジェクトを返しますlength。AppBarコンポーネントにが 2 つある場合、lengthは に等しいので、テストを完了2するためにそれをテストできます。=== 1

于 2016-02-10T09:58:59.300 に答える