js__react_enzyme__egghead/src/App.test.js

import "raf/polyfill";
import React from "react";
import { App, appName, titleName } from "./App";
import { configure, shallow, mount } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import toJson from 'enzyme-to-json';

// Configure Enzyme for the React version we are using.
// Could be in a test setup file. Required for React 16, 15, 0.14, 0.13.
configure({ adapter: new Adapter() });

describe("<App />>", () => {
  const wrapper = shallow(<App />);

  it("should find its elements", () => {
    // There is one <p> in <App />: only one shoud be present in shallow rendering.
    expect(wrapper.find("p").length).toBe(1);
    expect(wrapper.find("p.App-intro").exists()).toBe(true);
    expect(wrapper.find("ul").hasClass("tyler")).toBe(true);
    expect(wrapper.find("ul").children().length).toBe(3);
    expect(wrapper.find("h1").text()).toBe("Welcome to React");
  });

  it("should find using props", () => {
    // "key" and "ref" could not be used that way.

    // CSS attribute syntax.
    expect(wrapper.find("[text='Some title']").length).toBe(1);
    // Object property selector.
    expect(wrapper.find({ text: "Some title" }).length).toBe(1);
  });

  // FIXME cannot make sense of video.
  // @see http://airbnb.io/enzyme/docs/api/ReactWrapper/find.html
  test.skip("should find using a constructor", () => {
    // expect(wrapper.find(function App() { return ... }).length).toBe(1);
  });

  it("should find using displayName", () => {
    const w = mount(<App />);
    expect(w.find(appName).length).toBe(1);
    expect(w.find(titleName).length).toBe(1);
  });

  it("matches the snapshot", () => {
    const tree = shallow(<App />);
    expect(toJson(tree)).toMatchSnapshot();
  });
});