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>