2016 11 30 tech radar react testing with enzyme

---

layout: session title: 「技术雷达」之 React (Native) Testing with Enzyme categories: [演讲] tags: [React, ReactNaitve, Enzyme, UI, UnitTest] speaker: Jimmy Lv transition: move files: /assets/slide.js,/assets/slide.css,/js/zoom.js highlightStyle: kimbie.light theme: green published: True

30 min = 15 min * 2

[slide]

React (Native) Testing with Enzyme

via Jimmy Lv

[slide]

模块化管理？

[slide]

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

[slide]

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

[slide]

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

[slide]

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

[slide]

/* 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' })

[slide data-on-leave="outcallback"]

[slide]

NoBackend Website

---

<iframe data-src="http://nobackend.website" src="about:blank"></iframe>