feat: Add testing exercises

.babelrc

@@ -1,4 +1,15 @@
 {
-  "presets": ["@babel/preset-react"],
+  "presets": [
+    "@babel/preset-react",
+    "@babel/preset-typescript",
+    [
+      "next/babel",
+      {
+        "preset-env": {
+          "modules": "commonjs"
+        }
+      }
+    ]
+  ],
   "plugins": ["relay"]
 }

jest.config.js

@@ -0,0 +1,9 @@
+/*
+ * For a detailed explanation regarding each configuration property, visit:
+ * https://jestjs.io/docs/configuration
+ */
+
+module.exports = {
+  // The test environment that will be used for testing
+  testEnvironment: "jsdom",
+}

package.json

@@ -8,8 +8,8 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-relay": "^10.1.1",
     "react-router-dom": "^5.2.0",
     "relay": "^0.8.0-1"
@@ -21,28 +21,39 @@
     "start-exercise-0": "yarn start-web",
     "start-exercises": "concurrently -n relay,web \"yarn relay --watch\" \"yarn start-web\"",
     "start-web": "parcel src/index.html",
+    "test": "jest",
     "type-check": "tsc --noEmit"
-  },
+  }, 
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@babel/preset-react": "^7.12.10",
+    "@babel/preset-typescript": "^7.14.5",
     "@miragejs/graphql": "^0.1.9",
+    "@testing-library/react": "^12.0.0",
+    "@types/jest": "^26.0.23",
     "@types/node": "^14.14.12",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-relay": "^7.0.17",
     "@types/relay-runtime": "^10.1.4",
+    "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-relay": "^10.1.2",
     "concurrently": "^5.3.0",
+    "fibers": ">= 3.1.0",
     "graphql": "^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0",
     "graphql-tag": "^2.11.0",
     "husky": "^6.0.0",
+    "jest": "^27.0.4",
     "lint-staged": "^11.0.0",
     "miragejs": "^0.1.41",
+    "next": "^11.0.1",
+    "node-sass": "^4.0.0 || ^5.0.0",
     "parcel-bundler": "^1.12.4",
     "prettier": "^2.3.0",
     "relay-compiler": "^10.1.2",
     "relay-compiler-language-typescript": "^13.0.2",
+    "relay-test-utils": "^11.0.2",
+    "sass": "^1.3.0",
     "typescript": "^4.1.2"
   },
   "prettier": {
@@ -58,6 +69,7 @@
       "pre-commit": "lint-staged"
     }
   },
+
   "lint-staged": {
     "*.*": [
       "yarn prettier-write"

src/exercises/03-Testing-Queries/Artist3Heading.spec.tsx

@@ -0,0 +1,23 @@
+import React from "react"
+import { render } from "@testing-library/react"
+import { QueryRenderer } from "react-relay"
+import { MockPayloadGenerator, createMockEnvironment } from "relay-test-utils"
+import { GraphQLTaggedNode, OperationType } from "relay-runtime"
+import { MockResolvers } from "relay-test-utils/lib/RelayMockPayloadGenerator"
+import { DumbArtist3Heading } from "./Artist3Heading"
+
+describe("Artist3Heading", () => {
+  const props = {
+    artist: {
+      name: "Andy Warhol",
+    },
+  }
+
+  const { container, getByText } = render(<DumbArtist3Heading {...props} />)
+
+  it("has props", () => {
+    const dumbArtistComponent = getByText("Andy Warhol")
+
+    expect(dumbArtistComponent).toHaveLength(1)
+  })
+})

src/exercises/03-Testing-Queries/Artist3Heading.tsx

@@ -15,6 +15,10 @@ export const Artist3Heading: React.FC<Artist3HeadingProps> = ({ artist }) => {
   )
 }
 
+export const DumbArtist3Heading: React.FC = (props) => {
+  return <div>{props.artist.name}</div>
+}
+
 export const Artist3HeadingFragmentContainer = createFragmentContainer(
   Artist3Heading,
   {

src/exercises/03-Testing-Queries/README.md

@@ -1,4 +1,15 @@
-## Testing querying with Relay
+# Testing with Relay
+
+## Introduction
+
+We are using Jest, `relay-test-utils`, and React Testing Library to write unit tests for our components that use Relay. There are two main modules that we'll use in our tests (we'll go more into these later):
+
+- `createMockEnvironment`
+- `MockPayloadGenerator`
+- `QueryRenderer`
+
+Read more:
+[Relay docs: Testing Relay Components](https://relay.dev/docs/guides/testing-relay-components/)
 
 - introduce (at a high level) the tooling we'll use to write tests
 - look at existing tests in force/eigen/volt re: modern patterns for testing