Update working graphql jest tests

app/javascript/packs/frontend.tsx

@@ -1,13 +1,8 @@
 import React from 'react';
-import {render} from 'react-dom';
+import {hydrate} from 'react-dom';
 
-document.addEventListener(
-  'DOMContentLoaded',
-  (): void => {
-    import('./frontend/App').then(
-      ({default: App}): void => {
-        render(<App />, document.querySelector('main[id="app"]'));
-      }
-    );
-  }
-);
+document.addEventListener('DOMContentLoaded', (): void => {
+  import('./frontend/App').then(({default: App}): void => {
+    hydrate(<App />, document.querySelector('main[id="app"]'));
+  });
+});

app/javascript/packs/frontend/components/pages/pokemon/Show.tsx

@@ -11,7 +11,7 @@ export function PokemonShow({pokemon}: Props): React.FunctionComponentElement<Pr
   const {id, iid, nickname, pokedexNumber} = pokemon;
   return (
     <>
-      {nickname}:{' '}
+      {nickname}:
       <ul>
         <li>IID: {iid}</li>
         <li>GraphQL ID: {id}</li>

app/javascript/packs/frontend/components/pages/pokemon/__generated__/CreatePokemonMutation.graphql.ts

@@ -2,8 +2,8 @@
 
 import { ConcreteRequest } from "relay-runtime";
 export type CreatePokemonMutationVariables = {
-    readonly nickname: string;
-    readonly pokedexNumber: string;
+    nickname: string;
+    pokedexNumber: string;
 };
 export type CreatePokemonMutationResponse = {
     readonly createPokemon: {

spec/javascript/frontend/components/pages/pokemon/Show.test.tsx

@@ -1,19 +1,19 @@
 import * as React from 'react';
-import {shallow, mount, render, ReactWrapper, ShallowWrapper} from 'enzyme';
+import {shallow, mount, ReactWrapper, ShallowWrapper} from 'enzyme';
 import {createMockEnvironment, MockPayloadGenerator} from 'relay-test-utils';
 import {QueryRenderer, graphql} from 'react-relay';
-import ReactTestRenderer from 'react-test-renderer';
+import * as ReactTestRenderer from 'react-test-renderer';
 
 // FIXME: imports in this manner work fine via `yarn test` but fails in-editor for code completion
-//import FragmentedPokemonShow, {PokemonShow} from 'packs/frontend/components/pages/pokemon/Show';
-//import {Show_pokemon as ShowPokemon} from 'packs/frontend/__generated__/Show_pokemon.graphql';
+//import FragmentedPokemonShow, {PokemonShow, Props} from 'packs/frontend/components/pages/pokemon/Show';
+//import {Show_pokemon} from 'packs/frontend/components/pages/pokemon/__generated__/Show_pokemon.graphql';
 import FragmentedPokemonShow, {
   PokemonShow,
   Props,
 } from '../../../../../../app/javascript/packs/frontend/components/pages/pokemon/Show';
-import {Show_pokemon as ShowPokemon} from '../../../../../../app/javascript/packs/frontend/components/pages/pokemon/__generated__/Show_pokemon.graphql';
+import {Show_pokemon} from '../../../../../../app/javascript/packs/frontend/components/pages/pokemon/__generated__/Show_pokemon.graphql';
 
-const pokemon: ShowPokemon = {
+const pokemon: Show_pokemon = {
   id: '1',
   iid: 'x1',
   nickname: 'Bulbasaur',
@@ -33,28 +33,34 @@ function mountSetup(props = defaultProps): ReactWrapper {
   return mount(<PokemonShow {...props} />);
 }
 
-describe('<PokemonShow />', (): void => {
-  it('displays a pokemon', (): void => {
+describe('<PokemonShow />', () => {
+  it('displays a pokemon', () => {
     const wrapper = setup();
     expect(wrapper).toMatchSnapshot();
   });
 
   it('requests data from a GraphQL fragment', () => {
     const environment = createMockEnvironment();
+    const mockId = 'mock-id-1';
+
     const TestRenderer = () => (
       <QueryRenderer
         environment={environment}
         query={graphql`
-          query Show_pokemonSuccessQuery @relay_test_operation {
-            pokemon(id: "mock-id-1") {
+          query Show_pokemonSuccessQuery($mockId: ID!) @relay_test_operation {
+            pokemon: node(id: $mockId) {
               ...Show_pokemon
             }
           }
         `}
-        variables={{}}
-        render={({error, props}) => {
+        variables={{mockId}}
+        render={args => {
+          const {error, props} = args as {error: Error; props: Props};
           if (props) {
-            return <PokemonShow pokemon={(props as {pokemon: ShowPokemon}).pokemon} />;
+            // Prevent TS Compiler from complaining about unsupplied props
+            const Component = FragmentedPokemonShow as any;
+
+            return <Component pokemon={props.pokemon} />;
           } else if (error) {
             return error.message;
           }
@@ -62,9 +68,19 @@ describe('<PokemonShow />', (): void => {
         }}
       />
     );
-    const renderer = mount(<TestRenderer />);
-    environment.mock.resolveMostRecentOperation(operation => MockPayloadGenerator.generate(operation));
 
+    environment.mock.queueOperationResolver(operation =>
+      MockPayloadGenerator.generate(operation, {
+        Pokemon: () => ({
+          id: mockId,
+          iid: '1',
+          nickname: 'Bulba',
+          pokedexNumber: 3,
+        }),
+      })
+    );
+
+    const renderer = ReactTestRenderer.create(<TestRenderer />);
     expect(renderer).toMatchSnapshot();
   });
 });

spec/javascript/frontend/components/pages/pokemon/__generated__/Show_pokemonSuccessQuery.graphql.ts

@@ -2,7 +2,9 @@
 
 import { ConcreteRequest } from "relay-runtime";
 type Show_pokemon$ref = any;
-export type Show_pokemonSuccessQueryVariables = {};
+export type Show_pokemonSuccessQueryVariables = {
+    mockId: string;
+};
 export type Show_pokemonSuccessQueryResponse = {
     readonly pokemon: {
         readonly " $fragmentRefs": Show_pokemon$ref;
@@ -16,8 +18,11 @@ export type Show_pokemonSuccessQuery = {
 
 
 /*
-query Show_pokemonSuccessQuery {
-  pokemon(id: "mock-id-1") {
+query Show_pokemonSuccessQuery(
+  $mockId: ID!
+) {
+  pokemon: node(id: $mockId) {
+    __typename
     ...Show_pokemon
     id
   }
@@ -34,12 +39,20 @@ fragment Show_pokemon on Pokemon {
 const node: ConcreteRequest = (function(){
 var v0 = [
   {
-    "kind": "Literal",
+    "kind": "LocalArgument",
+    "name": "mockId",
+    "type": "ID!",
+    "defaultValue": null
+  }
+],
+v1 = [
+  {
+    "kind": "Variable",
     "name": "id",
-    "value": "mock-id-1"
+    "variableName": "mockId"
   }
 ],
-v1 = {
+v2 = {
   "type": "ID",
   "enumValues": null,
   "plural": false,
@@ -52,15 +65,15 @@ return {
     "name": "Show_pokemonSuccessQuery",
     "type": "Query",
     "metadata": null,
-    "argumentDefinitions": [],
+    "argumentDefinitions": (v0/*: any*/),
     "selections": [
       {
         "kind": "LinkedField",
-        "alias": null,
-        "name": "pokemon",
-        "storageKey": "pokemon(id:\"mock-id-1\")",
-        "args": (v0/*: any*/),
-        "concreteType": "Pokemon",
+        "alias": "pokemon",
+        "name": "node",
+        "storageKey": null,
+        "args": (v1/*: any*/),
+        "concreteType": null,
         "plural": false,
         "selections": [
           {
@@ -75,44 +88,57 @@ return {
   "operation": {
     "kind": "Operation",
     "name": "Show_pokemonSuccessQuery",
-    "argumentDefinitions": [],
+    "argumentDefinitions": (v0/*: any*/),
     "selections": [
       {
         "kind": "LinkedField",
-        "alias": null,
-        "name": "pokemon",
-        "storageKey": "pokemon(id:\"mock-id-1\")",
-        "args": (v0/*: any*/),
-        "concreteType": "Pokemon",
+        "alias": "pokemon",
+        "name": "node",
+        "storageKey": null,
+        "args": (v1/*: any*/),
+        "concreteType": null,
         "plural": false,
         "selections": [
           {
             "kind": "ScalarField",
             "alias": null,
-            "name": "id",
-            "args": null,
-            "storageKey": null
-          },
-          {
-            "kind": "ScalarField",
-            "alias": null,
-            "name": "iid",
+            "name": "__typename",
             "args": null,
             "storageKey": null
           },
           {
             "kind": "ScalarField",
             "alias": null,
-            "name": "nickname",
+            "name": "id",
             "args": null,
             "storageKey": null
           },
           {
-            "kind": "ScalarField",
-            "alias": null,
-            "name": "pokedexNumber",
-            "args": null,
-            "storageKey": null
+            "kind": "InlineFragment",
+            "type": "Pokemon",
+            "selections": [
+              {
+                "kind": "ScalarField",
+                "alias": null,
+                "name": "iid",
+                "args": null,
+                "storageKey": null
+              },
+              {
+                "kind": "ScalarField",
+                "alias": null,
+                "name": "nickname",
+                "args": null,
+                "storageKey": null
+              },
+              {
+                "kind": "ScalarField",
+                "alias": null,
+                "name": "pokedexNumber",
+                "args": null,
+                "storageKey": null
+              }
+            ]
           }
         ]
       }
@@ -122,17 +148,17 @@ return {
     "operationKind": "query",
     "name": "Show_pokemonSuccessQuery",
     "id": null,
-    "text": "query Show_pokemonSuccessQuery {\n  pokemon(id: \"mock-id-1\") {\n    ...Show_pokemon\n    id\n  }\n}\n\nfragment Show_pokemon on Pokemon {\n  id\n  iid\n  nickname\n  pokedexNumber\n}\n",
+    "text": "query Show_pokemonSuccessQuery(\n  $mockId: ID!\n) {\n  pokemon: node(id: $mockId) {\n    __typename\n    ...Show_pokemon\n    id\n  }\n}\n\nfragment Show_pokemon on Pokemon {\n  id\n  iid\n  nickname\n  pokedexNumber\n}\n",
     "metadata": {
       "relayTestingSelectionTypeInfo": {
         "pokemon": {
-          "type": "Pokemon",
+          "type": "Node",
           "enumValues": null,
           "plural": false,
           "nullable": true
         },
-        "pokemon.id": (v1/*: any*/),
-        "pokemon.iid": (v1/*: any*/),
+        "pokemon.id": (v2/*: any*/),
+        "pokemon.iid": (v2/*: any*/),
         "pokemon.nickname": {
           "type": "String",
           "enumValues": null,
@@ -150,5 +176,5 @@ return {
   }
 };
 })();
-(node as any).hash = '506c34fd9d3c1a5c65a7b36059f10143';
+(node as any).hash = 'ef7a9605c7de0545df001d0d9cb24676';
 export default node;

spec/javascript/frontend/components/pages/pokemon/__snapshots__/Show.test.tsx.snap

@@ -4,7 +4,6 @@ exports[`<PokemonShow /> displays a pokemon 1`] = `
 <Fragment>
   Bulbasaur
   :
-   
   <ul>
     <li>
       IID: 
@@ -23,14 +22,22 @@ exports[`<PokemonShow /> displays a pokemon 1`] = `
 `;
 
 exports[`<PokemonShow /> requests data from a GraphQL fragment 1`] = `
-<TestRenderer>
-  <ReactRelayQueryRenderer
-    environment={"RelayModernEnvironment(RelayModernMockEnvironment)"}
-    query={[Function]}
-    render={[Function]}
-    variables={Object {}}
-  >
-    Loading...
-  </ReactRelayQueryRenderer>
-</TestRenderer>
+Array [
+  "Bulba",
+  ":",
+  <ul>
+    <li>
+      IID: 
+      1
+    </li>
+    <li>
+      GraphQL ID: 
+      mock-id-1
+    </li>
+    <li>
+      Dex #: 
+      3
+    </li>
+  </ul>,
+]
 `;