feat: build out tests for testing exercise

.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,5 @@
+module.exports = {
+ // clearMocks: true,
+ testEnvironment: "jsdom",
+ testPathIgnorePatterns: ["/node_modules/", "/completed/"],
+}

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,36 @@
  "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",
  "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",
  "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",
  "typescript": "^4.1.2"
  },
  "prettier": {
@@ -58,6 +66,7 @@
  "pre-commit": "lint-staged"
  }
  },
+
  "lint-staged": {
  "*.*": [
  "yarn prettier-write"

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

@@ -0,0 +1,62 @@
+import React from "react"
+import { render } from "@testing-library/react"
+import { QueryRenderer } from "react-relay"
+import { MockPayloadGenerator, createMockEnvironment } from "relay-test-utils"
+import { graphql } from "relay-runtime"
+import {
+ Artist3Heading,
+ Artist3HeadingFragmentContainer,
+ Artist3HeadingProps,
+} from "./Artist3Heading"
+import { Artist3HeadingTestQuery } from "./__generated__/Artist3HeadingTestQuery.graphql"
+
+it("Artist3Heading (silly)", () => {
+ const props: Artist3HeadingProps = {
+ artist: {
+ name: "Andy Warhol",
+ birthYear: 123,
+ " $refType": "Artist3Heading_artist",
+ },
+ }
+
+ const { queryAllByText } = render(<Artist3Heading {...props} />)
+
+ const header = queryAllByText("Andy Warhol")
+ expect(header).toHaveLength(1)
+})
+
+it("Artist3Heading", () => {
+ const mockEnvironment = createMockEnvironment()
+
+ const { queryAllByText } = render(
+ <QueryRenderer<Artist3HeadingTestQuery>
+ environment={mockEnvironment}
+ query={graphql`
+ query Artist3HeadingTestQuery($artistID: ID!) {
+ artist(id: $artistID) {
+ ...Artist3Heading_artist
+ }
+ }
+ `}
+ variables={{ artistID: "wow" }}
+ render={({ props }) => {
+ if (!props || !props.artist) {
+ return <div>Loading</div>
+ }
+ return <Artist3HeadingFragmentContainer artist={props.artist} />
+ }}
+ />
+ )
+
+ mockEnvironment.mock.resolveMostRecentOperation(operation =>
+ MockPayloadGenerator.generate(operation, {
+ Artist: () => ({
+ name: "Andy Warhol",
+ birthYear: 123,
+ }),
+ })
+ )
+
+ const header = queryAllByText("Andy Warhol")
+ expect(header).toHaveLength(1)
+})

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

@@ -2,7 +2,7 @@ import React from "react"
 import { createFragmentContainer, graphql } from "react-relay"
 import { Artist3Heading_artist } from "./__generated__/Artist3Heading_artist.graphql"
 
-interface Artist3HeadingProps {
+export interface Artist3HeadingProps {
  artist: Artist3Heading_artist
 }
 
@@ -15,6 +15,7 @@ export const Artist3Heading: React.FC<Artist3HeadingProps> = ({ artist }) => {
  )
 }
 
+
 export const Artist3HeadingFragmentContainer = createFragmentContainer(
  Artist3Heading,
  {

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

@@ -0,0 +1,62 @@
+// import React from "react"
+// import { render } from "@testing-library/react"
+// import { QueryRenderer } from "react-relay"
+// import { MockPayloadGenerator, createMockEnvironment } from "relay-test-utils"
+// import { graphql } from "relay-runtime"
+// import {
+// Artist3Heading,
+// Artist3HeadingFragmentContainer,
+// Artist3HeadingProps,
+// } from "./Artist3Heading"
+// import { Artist3HeadingTestQuery } from "./__generated__/Artist3HeadingTestQuery.graphql"
+
+// it("Artist3Heading (silly)", () => {
+// const props: Artist3HeadingProps = {
+// artist: {
+// name: "Andy Warhol",
+// birthYear: 123,
+// " $refType": "Artist3Heading_artist",
+// },
+// }
+
+// const { queryAllByText } = render(<Artist3Heading {...props} />)
+
+// const header = queryAllByText("Andy Warhol")
+// expect(header).toHaveLength(1)
+// })
+
+// it("Artist3Heading", () => {
+// const mockEnvironment = createMockEnvironment()
+
+// const { queryAllByText } = render(
+// <QueryRenderer<Artist3HeadingTestQuery>
+// environment={mockEnvironment}
+// query={graphql`
+// query Artist3HeadingTestQuery($artistID: ID!) {
+// artist(id: $artistID) {
+// ...Artist3Heading_artist
+// }
+// }
+// `}
+// variables={{ artistID: "wow" }}
+// render={({ props }) => {
+// if (!props || !props.artist) {
+// return <div>Loading</div>
+// }
+// return <Artist3HeadingFragmentContainer artist={props.artist} />
+// }}
+// />
+// )
+
+// mockEnvironment.mock.resolveMostRecentOperation(operation =>
+// MockPayloadGenerator.generate(operation, {
+// Artist: () => ({
+// name: "Andy Warhol",
+// birthYear: 123,
+// }),
+// })
+// )
+
+// const header = queryAllByText("Andy Warhol")
+// expect(header).toHaveLength(1)
+// })