mardi 9 février 2016

How to test if a React component contains another component with Tape and Enzyme?

Suppose I have the following React component:

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

And I want to set up a test to make sure the user sees a material-ui AppBar when the NavBar is rendered, using Tape and Enzyme for that:

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

How can I do it properly?

Aucun commentaire:

Enregistrer un commentaire