Adds Jest + React Testing Library 🧑‍🔬 (#129)

.babelrc

@@ -1,6 +1,13 @@
 {
   "presets": [
-    "@babel/preset-env",
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ],
     "@babel/preset-react",
     "@babel/preset-typescript"
   ],

.gitignore

@@ -23,3 +23,6 @@ yarn.lock
 
 # Built Visual Studio Code Extensions
 *.vsix
+
+# jest
+coverage

README.md

@@ -126,6 +126,31 @@ There are two protected branches - development and main. Main is the default bra
 
 There are two live instances - a [staging instance](https://our415-staging-a91cdc6d7b2b.herokuapp.com/) and a [production instance](https://our415-abb7eecb7449.herokuapp.com/). Merges onto the development branch deploys the development branch to the staging isntance. Merges onto the main branch deploys the main branch to the production instance. See the [github workflows](https://github.com/Exygy/askdarcel-web/tree/main/.github/workflows) for the details. Environment variables used in the deployments are set in github environments - 'prod' supplies the production instance and 'dev' supplies the staging instance..
 
+## Testing
+
+We use [Jest](https://jestjs.io/) as a test runner and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) for component testing. Developers should become familiar with these tools.
+
+Tests files should be co-located next to the source file in the file system and use the name of their source file with the suffix `*.test.tsx`.
+
+```
+app
+└── components
+    ├── MyComponent.tsx
+    └── MyComponent.test.tsx
+```
+
+To run tests:
+
+```sh
+npm run test # Run all tests and exit
+npm run test:watch # Watch files for changes and rerun tests related to changed files
+npm run test:watch:all # Watch files for changes and rerun all tests when something changes
+```
+
+### Acceptance testing
+
+We do not currently support high-level acceptance testing that simulates workflows that cannot be tested through React Testing Library.
+
 ## Pull Requests
 
 Pull requests are opened to the development branch. When opening a pull request please fill out the as much of the pull request template you can, which includes tagging the issue your PR is related to, a description of your PR, indicating the type of change, including details for the reviewer about how to test your PR, and a testing checklist. Additionally, officially link the notion ticket to the PR using GitHub's linking UI.

app/components/listing/__tests__/ServiceCard.test.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { BrowserRouter } from "react-router-dom";
+import { ServiceCard } from "../../ui/Cards/ServiceCard";
+
+describe("<ServiceCard />", () => {
+  const validService = {
+    id: 2,
+    name: "Test Service",
+    long_description: "This valuable service does things",
+  };
+
+  it("checks a valid user should render the appropriate fields in the right place", () => {
+    render(<ServiceCard service={validService} />, { wrapper: BrowserRouter });
+    expect(screen.getByRole("heading")).toHaveTextContent("Test Service");
+    expect(screen.getByTestId("service-card-description")).toHaveTextContent(
+      validService.long_description
+    );
+  });
+});

app/components/ui/Cards/ServiceCard.tsx

@@ -1,15 +1,19 @@
+import { Service } from "models";
 import React from "react";
 import { Link } from "react-router-dom";
-import { Service } from "../../../models";
 import styles from "./ServiceCard.module.scss";
 
-export const ServiceCard = ({ service }: { service: Service }) => {
+type ServiceCardProps = Pick<Service, "id" | "name" | "long_description">;
+
+export const ServiceCard = ({ service }: { service: ServiceCardProps }) => {
   const { id, name, long_description } = service;
 
   return (
     <Link to={{ pathname: `/services/${id}` }} className={styles.serviceCard}>
       <h3 className={styles.header}>{name}</h3>
-      <p className={styles.description}>{long_description}</p>
+      <p data-testid="service-card-description" className={styles.description}>
+        {long_description}
+      </p>
     </Link>
   );
 };

app/models/RecurringSchedule.ts

@@ -2,9 +2,9 @@
  * Data structures used for consistently representing time throughout the app.
  */
 
-import { invert } from "utils/arrays";
 import sortBy from "lodash.sortby";
 import minBy from "lodash.minby";
+import { invert } from "../utils/arrays";
 
 // WARNING: This must match Moment.js's day of week to integer mapping.
 export const DAY_TO_INT = Object.freeze({

app/utils/strings.test.ts

@@ -1,11 +1,11 @@
-// import { removeAsterisksAndHashes } from "./strings";
+import { removeAsterisksAndHashes } from "./strings";
 
-// describe("removeAsterisksAndHashes", () => {
-//   it("removes # and *", () => {
-//     const str = `# **Service Contact Information:**\n# **Another Heading:**`;
+describe("removeAsterisksAndHashes", () => {
+  it("removes # and *", () => {
+    const str = `# **Service Contact Information:**\n# **Another Heading:**`;
+    const actual = removeAsterisksAndHashes(str);
+    const expected = ` Service Contact Information:\n Another Heading:`;
 
-//     const actual = removeAsterisksAndHashes(str);
-//     const expected = ` Service Contact Information:\n Another Heading:`;
-//     expect(actual).to.equal(expected);
-//   });
-// });
+    expect(actual).toBe(expected);
+  });
+});