feat: set up integration tests with msw

integration-tests/package.json

@@ -13,6 +13,7 @@
     "next",
     "vite",
     "vite-swc",
+    "vite-jest-msw",
     "node-standard",
     "node-esm",
     "shared"

integration-tests/vite-jest-msw/jest.config.ts → integration-tests/vite-jest-msw/jest.config.js

@@ -1,12 +1,10 @@
-import type { Config } from "jest";
-
-const config: Config = {
+const config = {
   globals: {
     "globalThis.__DEV__": JSON.stringify(true),
   },
   testEnvironment: "jsdom",
   setupFiles: ["./tests/jest.polyfills.js"],
-  setupFilesAfterEnv: ["./tests/setupTests.ts"],
+  setupFilesAfterEnv: ["./tests/setupTests.js"],
   transform: {
     "\\.(gql|graphql)$": "@graphql-tools/jest-transform",
     ".*": "babel-jest",

integration-tests/vite-jest-msw/package.json

@@ -23,7 +23,8 @@
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
     "@graphql-tools/jest-transform": "^2.0.0",
-    "@playwright/test": "*",
+    "@graphql-tools/schema": "^10.0.3",
+    "@graphql-tools/utils": "^10.1.2",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.2",
     "@testing-library/user-event": "^14.5.2",

integration-tests/vite-jest-msw/src/App.tsx

@@ -25,7 +25,7 @@ const httpLink = new HttpLink({
   uri: "https://main--hack-the-e-commerce.apollographos.net/graphql",
 });
 
-const client = new ApolloClient({
+export const client = new ApolloClient({
   cache: new InMemoryCache(),
   link: ApolloLink.from([delayLink, httpLink]),
 });
@@ -54,7 +54,7 @@ export default function App() {
 
 function Main() {
   const { data } = useQuery(QUERY);
-  console.log({ data });
+
   return data ?
       <ul>
         {data?.products.map(({ id, title }) => <li key={id}>{title}</li>)}

integration-tests/vite-jest-msw/tests/jest-msw/apollo-client.test.tsx

@@ -4,26 +4,20 @@ import { render as rtlRender, screen } from "@testing-library/react";
 import {
   ApolloClient,
   ApolloProvider,
-  InMemoryCache,
   NormalizedCacheObject,
 } from "@apollo/client";
-import App from "../../src/App";
+import App, { client } from "../../src/App";
 import { schemaProxy } from "../mocks/handlers";
 
-const client = new ApolloClient({
-  cache: new InMemoryCache(),
-  uri: "http://localhost:3000/graphql",
-});
-
-const render = (client: ApolloClient<NormalizedCacheObject>) =>
+const render = (renderedClient: ApolloClient<NormalizedCacheObject>) =>
   rtlRender(
-    <ApolloProvider client={client}>
+    <ApolloProvider client={renderedClient}>
       <App />
     </ApolloProvider>
   );
 
 beforeEach(() => {
-  // since all our tests now use our production Apollo Client instance
+  // since all our tests now use our "real" production Apollo Client instance,
   // we need to reset the client cache before each test
   return client.cache.reset();
 });
@@ -32,36 +26,36 @@ describe("IndexRoute", () => {
   test("renders", async () => {
     render(client);
 
-    screen.debug();
-    expect(await screen.findByText(/product/i)).toBeInTheDocument();
-    // expect(await screen.findByText(/this is my playlist/i)).toBeInTheDocument();
-    // expect(await screen.findByText(/description/i)).toBeInTheDocument();
+    expect(await screen.findByText(/blue jays hat/i)).toBeInTheDocument();
   });
 
-  // test("allows resolvers to be updated via schemaProxy", async () => {
-  //   // using _restore = replaceSchema(
-  //   //   schemaProxy.fork({
-  //   //     resolvers: {
-  //   //       FeaturedPlaylistConnection: {
-  //   //         message: () => "purple seahorse",
-  //   //         edges: () => [{}],
-  //   //       },
-  //   //     },
-  //   //   })
-  //   // );
+  test("allows resolvers to be updated via schemaProxy", async () => {
+    schemaProxy.add({
+      resolvers: {
+        Query: {
+          products: () => {
+            return [
+              {
+                id: "2",
+                title: "Mets Hat",
+              },
+            ];
+          },
+        },
+      },
+    });
 
-  //   render(client);
+    render(client);
 
-  //   // the resolver has been updated
-  //   // expect(await screen.findByText(/afternoon delight/i)).toBeInTheDocument();
-  //   expect(await screen.findByText(/purple seahorse/i)).toBeInTheDocument();
-  // });
+    // the resolver has been updated
+    expect(await screen.findByText(/mets hat/i)).toBeInTheDocument();
+  });
 
-  // test("reset method works", async () => {
-  //   schemaProxy.reset();
+  test("reset method works", async () => {
+    schemaProxy.reset();
 
-  //   render(client);
+    render(client);
 
-  //   expect(await screen.findByText(/afternoon delight/i)).toBeInTheDocument();
-  // });
+    expect(await screen.findByText(/blue jays hat/i)).toBeInTheDocument();
+  });
 });

integration-tests/vite-jest-msw/tests/mocks/handlers.ts

@@ -1,30 +1,18 @@
 import { graphql, HttpResponse } from "msw";
-import { execute, GraphQLSchema } from "graphql";
+import { execute } from "graphql";
 import { gql } from "@apollo/client";
 import { createMockSchema, createProxiedSchema } from "@apollo/client/testing";
 import { makeExecutableSchema } from "@graphql-tools/schema";
 import Schema from "../schema.graphql";
 
 export const resolvers = {
   Query: {
-    products: () => {
-      console.log("product resolver");
-      return [
-        {
-          id: "1",
-          title: "product",
-          description: "description",
-          mediaUrl: "http://example.com",
-          weight: 1.0,
-          price: {
-            amount: 1.0,
-            currency: "USD",
-          },
-          reviews: [],
-          averageRating: 5.0,
-        },
-      ];
-    },
+    products: () => [
+      {
+        id: "1",
+        title: "Blue Jays Hat",
+      },
+    ],
   },
 };
 
@@ -62,7 +50,6 @@ export let schemaProxy = createProxiedSchema(schema, resolvers);
 export const handlers = [
   graphql.operation(async ({ query, variables, operationName }) => {
     const document = gql(query);
-    console.log({ execute });
 
     const result = await execute({
       document,
@@ -71,8 +58,6 @@ export const handlers = [
       variableValues: variables,
     });
 
-    console.log({ result });
-    console.log("AFTER");
     return HttpResponse.json(result);
   }),
 ];

integration-tests/vite-jest-msw/tests/setupTests.ts → integration-tests/vite-jest-msw/tests/setupTests.js

@@ -1,5 +1,6 @@
 import "@testing-library/jest-dom";
-import { beforeAll, afterAll, afterEach, jest } from "@jest/globals";
+
+import { beforeAll, afterAll, afterEach } from "@jest/globals";
 import { server } from "./mocks/server";
 import { gql } from "@apollo/client";
 

integration-tests/vite-jest-msw/tsconfig.json

@@ -23,6 +23,6 @@
     "noFallthroughCasesInSwitch": true
   },
   "files": ["@types/graphql.d.ts"],
-  "include": ["src", "./tests/setupTests.ts"],
+  "include": ["src", "tests", "./tests/setupTests.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

integration-tests/vite-jest-msw/tsconfig.node.json

@@ -8,5 +8,5 @@
     "allowSyntheticDefaultImports": true
   },
   "files": ["@types/graphql.d.ts"],
-  "include": ["vite.config.ts", "./tests/setupTests.ts"]
+  "include": ["vite.config.ts", "tests/setupTests.js"]
 }