Testing React

package.json

@@ -5,7 +5,17 @@
     "start": "run-p start:dev start:api",
     "start:dev": "webpack-dev-server --config webpack.config.dev.js --port 3000",
     "prestart:api": "node tools/createMockDb.js",
-    "start:api": "node tools/apiServer.js"
+    "start:api": "node tools/apiServer.js",
+    "test": "jest --watch"
+  },
+  "jest": {
+    "setupFiles": [
+      "./tools/testSetup.js"
+    ],
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tools/fileMock.js",
+      "\\.(css|less)$": "<rootDir>/tools/styleMock.js"
+    }
   },
   "dependencies": {
     "bootstrap": "4.3.1",

src/components/common/Header.test.js

@@ -0,0 +1,22 @@
+import React from "react";
+import Header from "./Header";
+import { mount, shallow } from "enzyme";
+import { MemoryRouter } from "react-router-dom";
+
+// Note how with shallow render you search for the React component tag
+it("contains 3 NavLinks via shallow", () => {
+  const numLinks = shallow(<Header />).find("NavLink").length;
+  expect(numLinks).toEqual(3);
+});
+
+// Note how with mount you search for the final rendered HTML since it generates the final DOM.
+// We also need to pull in React Router's memoryRouter for testing since the Header expects to have React Router's props passed in.
+it("contains 3 anchors via mount", () => {
+  const numAnchors = mount(
+    <MemoryRouter>
+      <Header />
+    </MemoryRouter>
+  ).find("a").length;
+
+  expect(numAnchors).toEqual(3);
+});

src/components/courses/CourseForm.Enzyme.test.js

@@ -0,0 +1,34 @@
+import React from "react";
+import CourseForm from "./CourseForm";
+import { shallow } from "enzyme";
+
+function renderCourseForm(args) {
+  const defaultProps = {
+    authors: [],
+    course: {},
+    saving: false,
+    errors: {},
+    onSave: () => {},
+    onChange: () => {}
+  };
+
+  const props = { ...defaultProps, ...args };
+  return shallow(<CourseForm {...props} />);
+}
+
+it("renders form and header", () => {
+  const wrapper = renderCourseForm();
+  // console.log(wrapper.debug());
+  expect(wrapper.find("form").length).toBe(1);
+  expect(wrapper.find("h2").text()).toEqual("Add Course");
+});
+
+it('labels save buttons as "Save" when not saving', () => {
+  const wrapper = renderCourseForm();
+  expect(wrapper.find("button").text()).toBe("Save");
+});
+
+it('labels save button as "Saving..." when saving', () => {
+  const wrapper = renderCourseForm({ saving: true });
+  expect(wrapper.find("button").text()).toBe("Saving...");
+});

src/components/courses/CourseForm.ReactTestingLibrary.test.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { cleanup, render } from "react-testing-library";
+import CourseForm from "./CourseForm";
+
+afterEach(cleanup);
+
+function renderCourseForm(args) {
+  let defaultProps = {
+    authors: [],
+    course: {},
+    saving: false,
+    errors: {},
+    onSave: () => {},
+    onChange: () => {}
+  };
+
+  const props = { ...defaultProps, ...args };
+  return render(<CourseForm {...props} />);
+}
+
+it("should render Add Course header", () => {
+  const { getByText } = renderCourseForm();
+  getByText("Add Course");
+});
+
+it('should label save button as "Save" when not saving', () => {
+  const { getByText } = renderCourseForm();
+  getByText("Save");
+});
+
+it('should label save button as "Saving..." when saving', () => {
+  const { getByText, debug } = renderCourseForm({ saving: true });
+  // debug();
+  getByText("Saving...");
+});

src/components/courses/CourseForm.Snapshots.test.js

@@ -0,0 +1,32 @@
+import React from "react";
+import CourseForm from "./CourseForm";
+import renderer from "react-test-renderer";
+import { courses, authors } from "../../../tools/mockData";
+
+it("sets submit button label 'Saving...' when saving is true", () => {
+  const tree = renderer.create(
+    <CourseForm
+      course={courses[0]}
+      authors={authors}
+      onSave={jest.fn()}
+      onChange={jest.fn()}
+      saving
+    />
+  );
+
+  expect(tree).toMatchSnapshot();
+});
+
+it("sets submit button label 'Save' when saving is false", () => {
+  const tree = renderer.create(
+    <CourseForm
+      course={courses[0]}
+      authors={authors}
+      onSave={jest.fn()}
+      onChange={jest.fn()}
+      saving={false}
+    />
+  );
+
+  expect(tree).toMatchSnapshot();
+});

src/components/courses/__snapshots__/CourseForm.Snapshots.test.js.snap

@@ -0,0 +1,197 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`sets submit button label 'Save' when saving is false 1`] = `
+<form
+  onSubmit={[MockFunction]}
+>
+  <h2>
+    Edit
+     Course
+  </h2>
+  <div
+    className="form-group"
+  >
+    <label
+      htmlFor="title"
+    >
+      Title
+    </label>
+    <div
+      className="field"
+    >
+      <input
+        className="form-control"
+        name="title"
+        onChange={[MockFunction]}
+        type="text"
+        value="Securing React Apps with Auth0"
+      />
+    </div>
+  </div>
+  <div
+    className="form-group"
+  >
+    <label
+      htmlFor="authorId"
+    >
+      Author
+    </label>
+    <div
+      className="field"
+    >
+      <select
+        className="form-control"
+        name="authorId"
+        onChange={[MockFunction]}
+        value={1}
+      >
+        <option
+          value=""
+        >
+          Select Author
+        </option>
+        <option
+          value={1}
+        >
+          Cory House
+        </option>
+        <option
+          value={2}
+        >
+          Scott Allen
+        </option>
+        <option
+          value={3}
+        >
+          Dan Wahlin
+        </option>
+      </select>
+    </div>
+  </div>
+  <div
+    className="form-group"
+  >
+    <label
+      htmlFor="category"
+    >
+      Category
+    </label>
+    <div
+      className="field"
+    >
+      <input
+        className="form-control"
+        name="category"
+        onChange={[MockFunction]}
+        type="text"
+        value="JavaScript"
+      />
+    </div>
+  </div>
+  <button
+    className="btn btn-primary"
+    disabled={false}
+    type="submit"
+  >
+    Save
+  </button>
+</form>
+`;
+
+exports[`sets submit button label 'Saving...' when saving is true 1`] = `
+<form
+  onSubmit={[MockFunction]}
+>
+  <h2>
+    Edit
+     Course
+  </h2>
+  <div
+    className="form-group"
+  >
+    <label
+      htmlFor="title"
+    >
+      Title
+    </label>
+    <div
+      className="field"
+    >
+      <input
+        className="form-control"
+        name="title"
+        onChange={[MockFunction]}
+        type="text"
+        value="Securing React Apps with Auth0"
+      />
+    </div>
+  </div>
+  <div
+    className="form-group"
+  >
+    <label
+      htmlFor="authorId"
+    >
+      Author
+    </label>
+    <div
+      className="field"
+    >
+      <select
+        className="form-control"
+        name="authorId"
+        onChange={[MockFunction]}
+        value={1}
+      >
+        <option
+          value=""
+        >
+          Select Author
+        </option>
+        <option
+          value={1}
+        >
+          Cory House
+        </option>
+        <option
+          value={2}
+        >
+          Scott Allen
+        </option>
+        <option
+          value={3}
+        >
+          Dan Wahlin
+        </option>
+      </select>
+    </div>
+  </div>
+  <div
+    className="form-group"
+  >
+    <label
+      htmlFor="category"
+    >
+      Category
+    </label>
+    <div
+      className="field"
+    >
+      <input
+        className="form-control"
+        name="category"
+        onChange={[MockFunction]}
+        type="text"
+        value="JavaScript"
+      />
+    </div>
+  </div>
+  <button
+    className="btn btn-primary"
+    disabled={true}
+    type="submit"
+  >
+    Saving...
+  </button>
+</form>
+`;

src/index.test.js

@@ -0,0 +1,3 @@
+it("should pass", () => {
+  expect(true).toEqual(true);
+});

tools/fileMock.js

@@ -0,0 +1,2 @@
+// Mocks file imports for Jest. As suggested by https://jestjs.io/docs/en/webpack
+module.exports = "test-file-stub";

tools/styleMock.js

@@ -0,0 +1,2 @@
+// Mocks CSS imports for Jest. As suggested by https://jestjs.io/docs/en/webpack
+module.exports = {};

tools/testSetup.js

@@ -0,0 +1,3 @@
+import { configure } from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+configure({ adapter: new Adapter() });