React (Native) Testing with Enzyme

via Jimmy Lv

模块化管理?

JavaScript 模块化

import { shallow } from 'enzyme'

describe('Enzyme Shallow', () => {
  it('App should have title equals to Todos', () => {
    let app = shallow(<App />)
    expect(app.find('h1').text()).to.equal('Todos')
  })
}
import { render } from 'enzyme'

describe('Enzyme Render', () => {
  it('Todo item should not have todo-done class', () => {
    let app = render(<App />)
    expect(app.find('.todo-done').length).to.equal(0)
  })
})
import { mount } from 'enzyme'

describe('Enzyme Mount', () => {
  it('should delete Todo when click button', () => {
    let app = mount(<App />)
    let todoLength = app.find('li').length
    app.find('button.delete').at(0).simulate('click')
    expect(app.find('li').length).to.equal(todoLength - 1)
  })
})
it('simulates click events', () => {  
  const onButtonClick = sinon.spy()
  const wrapper = shallow(
    <Foo onButtonClick={onButtonClick} />
  )
  wrapper.find('button').simulate('click')
  expect(onButtonClick.calledOnce).to.be.true
})
/* CSS Selector */
wrapper.find('.foo') //class syntax
wrapper.find('input') //tag syntax
wrapper.find('#foo') //id syntax 
wrapper.find('[htmlFor="foo"]') //prop syntax


/* Component Constructor */
wrapper.find(MyComponent)
MyComponent.displayName = 'MyComponent'
wrapper.find('MyComponent')

/* Object Property Selector */
const wrapper = mount(
  <div>
    <span foo={3} bar={false} title="baz" />
  </div>
)

wrapper.find({ foo: 3 })
wrapper.find({ bar: false })
wrapper.find({ title: 'baz'})

NoBackend Website