video6: Understand the different accepted selectors in Enzyme.

.eslintrc.js

@@ -18,6 +18,7 @@ module.exports = {
     "describe": false,
     "expect": false,
     "it": false,
+    "test": false,
   },
 
   "plugins": ["react"],

.idea/egghead_enzyme.iml

@@ -1,7 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <module type="WEB_MODULE" version="4">
   <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$" />
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/build" />
+      <excludeFolder url="file://$MODULE_DIR$/coverage" />
+    </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
   </component>

.idea/runConfigurations/Jest.xml

@@ -3,7 +3,7 @@
     <node-interpreter value="project" />
     <node-options value="" />
     <working-dir value="$PROJECT_DIR$" />
-    <jest-options value="--watchAll" />
+    <jest-options value="--watchAll --env=jsdom" />
     <envs />
     <scope-kind value="ALL" />
     <method />

package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "prop-types": "^15.6.1",
     "raf": "^3.4.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0"
@@ -9,6 +10,13 @@
     "enzyme-adapter-react-16": "^1.1.1",
     "react-scripts": "1.1.1"
   },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/*.js",
+      "!src/registerServiceWorker.js",
+      "!src/index.js"
+    ]
+  },
   "license": "proprietary",
   "name": "egghead_enzyme",
   "private": true,

src/App.js

@@ -1,8 +1,16 @@
+import PropTypes from "prop-types";
 import React, { Component } from "react";
 import logo from "./logo.svg";
 import "./App.css";
 
-const Test = () => <div>Testing</div>;
+const Title = ({ text }) => <div>{text}</div>;
+
+Title.propTypes = {
+  text: PropTypes.string,
+};
+
+const appName = "MasterControlProgram";
+const titleName = "heading";
 
 class App extends Component {
   render() {
@@ -12,6 +20,7 @@ class App extends Component {
           <img src={logo} className="App-logo" alt="logo" />
           <h1 className="App-title">Welcome to React</h1>
         </header>
+        <Title text="Some title" />
         <p className="App-intro">
           To get started, edit <code>src/App.js</code> and save to reload.
         </p>
@@ -20,10 +29,12 @@ class App extends Component {
           <li>Second</li>
           <li>Third</li>
         </ul>
-        <Test/>
       </div>
     );
   }
 }
 
-export default App;
+App.displayName = appName;
+Title.displayName = titleName;
+
+export { App, appName, titleName };

src/App.test.js

@@ -1,7 +1,7 @@
 import "raf/polyfill";
 import React from "react";
-import App from "./App";
-import { configure, shallow } from "enzyme";
+import { App, appName, titleName } from "./App";
+import { configure, shallow, mount } from "enzyme";
 import Adapter from "enzyme-adapter-react-16";
 
 // Configure Enzyme for the React version we are using.
@@ -11,16 +11,33 @@ configure({ adapter: new Adapter() });
 describe("<App />>", () => {
   const wrapper = shallow(<App />);
 
-  it("should contain 1 p element", () => {
+  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);
+  });
 });

yarn.lock

@@ -5587,7 +5587,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10, prop-types@^15.6.0:
+prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
   dependencies: