Mock with MSW

__tests__/apiwrapper.js

@@ -1,52 +1,66 @@
 import { Octokit } from '@octokit/core';
-import fetchMock from 'fetch-mock'; // https://github.com/wheresrhys/fetch-mock
-
 import { paginateGraphql } from '@octokit/plugin-paginate-graphql';
+
+import { graphql, HttpResponse } from 'msw'; // https://mswjs.io/docs/getting-started/mocks/graphql-api
+import { setupServer } from 'msw/node'; // https://mswjs.io/docs/getting-started/integrate/node
+
 import { ApiWrapper } from '../apiwrapper';
 
 const GraphQlOctokit = Octokit.plugin(paginateGraphql);
 const octokit = new GraphQlOctokit({ auth: 'fake-token-value' }); // don't use default GITHUB_TOKEN token from env
 
 const apiWrapper = new ApiWrapper({ octokit });
 
-const mockResponse = (name, data) => {
-  fetchMock.postOnce({
-    name,
-    matcher: 'https://api.github.com/graphql',
-    response: {
-      status: 200,
-      body: { data },
-    },
-  });
+const server = setupServer(); // https://mswjs.io/docs/api/setup-server/
+const mock = ({ action, matcher, data }) => {
+  const actions = {
+    mutation: graphql.mutation,
+    query: graphql.query,
+  };
+
+  server.use(
+    actions[action](matcher, () => HttpResponse.json({ data })),
+  );
 };
 
 describe('ApiWrapper', () => {
+  beforeAll(() => {
+    server.listen();
+  });
+
   afterAll(() => {
-    fetchMock.reset();
+    server.close();
+  });
+
+  afterEach(() => {
+    server.resetHandlers();
   });
 
   describe('.createProject()', () => {
     const data = { createProjectV2: { projectV2: { id: 'PVT_000000000000002' } } };
+
+    beforeEach(() => {
+      mock({ action: 'mutation', matcher: /createProject/, data });
+    });
+
     const input = {
       title: 'example-project-title',
       organization: { id: 'O_0000000001' },
       repository: { id: 'R_0000000001' },
     };
 
-    beforeEach(() => { mockResponse('createProject', data); });
-    afterEach(() => { fetchMock.reset(); });
-
     test('returns id', async () => {
-      const id = await apiWrapper.fetchOrganiztion(input);
-      expect(id).toEqual(data.id);
+      const id = await apiWrapper.createProject(input);
+      expect(id).toEqual(data.createProjectV2.projectV2.id);
     });
   });
 
   describe('.fetchOrganiztion()', () => {
     const data = { organization: { id: 'O_0000000001' } };
 
-    beforeEach(() => { mockResponse('fetchOrganiztion', data); });
-    afterEach(() => { fetchMock.reset(); });
+    beforeEach(() => {
+      mock({ action: 'query', matcher: /fetchOrgainzation/, data });
+    });
 
     test('returns object containing id', async () => {
       const { id } = await apiWrapper.fetchOrganiztion({ owner: 'acme' });
@@ -78,14 +92,15 @@ describe('ApiWrapper', () => {
       },
     };
 
+    beforeEach(() => {
+      mock({ action: 'query', matcher: /paginate/, data });
+    });
+
     const input = {
       ownerName: 'acme',
       repositoryName: 'example-repository-name',
     };
 
-    beforeEach(() => { mockResponse('fetchRepository', data); });
-    afterEach(() => { fetchMock.reset(); });
-
     test('returns object containing id', async () => {
       const repository = await apiWrapper.fetchRepository(input);
       expect({ repository }).toEqual(data); // checks deep
@@ -95,14 +110,15 @@ describe('ApiWrapper', () => {
   describe('.deleteProject()', () => {
     const data = { projectId: 'PVT_000000000000001' };
 
+    beforeEach(() => {
+      mock({ action: 'mutation', matcher: /deleteProject/, data });
+    });
+
     const input = {
       project: { id: 'PVT_000000000000001' },
       clientMutationId: 'example-client-mutation-id',
     };
 
-    beforeEach(() => { mockResponse('deleteProject', data); });
-    afterEach(() => { fetchMock.reset(); });
-
     test('returns object containing id', async () => {
       const id = await apiWrapper.deleteProject(input);
       expect(id).toEqual(data.projectId); // checks deep

__tests__/integration.js

@@ -1,7 +1,9 @@
-import fetchMock from 'fetch-mock'; // https://github.com/wheresrhys/fetch-mock
-
 import { Octokit } from '@octokit/core';
 import { paginateGraphql } from '@octokit/plugin-paginate-graphql';
+
+import { graphql, HttpResponse } from 'msw'; // https://mswjs.io/docs/getting-started/mocks/graphql-api
+import { setupServer } from 'msw/node'; // https://mswjs.io/docs/getting-started/integrate/node
+
 import { ApiWrapper } from '../apiwrapper';
 import { RepositoryProjectsManager } from '../projects.js'; // eslint-disable-line import/extensions
 
@@ -12,94 +14,76 @@ const apiWrapper = new ApiWrapper({ octokit });
 
 const rpm = new RepositoryProjectsManager({ apiWrapper, ownerName: 'acme', repositoryName: 'example-repository' });
 
+const server = setupServer(); // MSW mock server
+
 describe('RepositoryProjectsManager integration test', () => {
-  afterAll(() => {
-    fetchMock.reset();
+  beforeAll(() => {
+    server.listen();
   });
 
   beforeEach(() => {
-    fetchMock
-      .postOnce({
-        name: '1',
-        matcher: 'https://api.github.com/graphql',
-        response: {
-          status: 200,
-          body: {
-            data: {
-              organization: {
-                id: 'O_0000000001',
-                name: 'ACME Corporation',
-              },
-            },
+    server.use(
+      graphql.query(/fetchOrgainzation/, () => HttpResponse.json({
+        data: {
+          organization: {
+            id: 'O_0000000001',
+            name: 'ACME Corporation',
           },
         },
-      })
-      .postOnce({
-        name: '2',
-        matcher: 'https://api.github.com/graphql',
-        response: {
-          status: 200,
-          body: {
-            data: {
-              repository: {
-                name: 'example-repository',
-                id: 'R_0000000001',
-                projectsV2: {
-                  nodes: [
-                    {
-                      id: 'PVT_kwDOAnsQgs4AP9Qq',
-                      title: 'layer-200/module-1',
-                    },
-                    {
-                      id: 'PVT_000000000000002',
-                      title: 'layer-100/module-2',
-                    },
-                  ],
-                  pageInfo: {
-                    hasNextPage: false,
-                    endCursor: 'Nw',
-                  },
+      })),
+      graphql.query(/paginate/, () => HttpResponse.json({
+        data: {
+          repository: {
+            name: 'example-repository',
+            id: 'R_0000000001',
+            projectsV2: {
+              nodes: [
+                {
+                  id: 'PVT_kwDOAnsQgs4AP9Qq',
+                  title: 'layer-200/module-1',
+                },
+                {
+                  id: 'PVT_000000000000002',
+                  title: 'layer-100/module-2',
                 },
+              ],
+              pageInfo: {
+                hasNextPage: false,
+                endCursor: 'Nw',
               },
             },
           },
         },
-      })
-      .postOnce({
-        name: '3',
-        matcher: 'https://api.github.com/graphql',
-        response: {
-          status: 200,
-          body: {
-            data: {
-              repository: {
-                name: 'example-repository',
-                id: 'R_0000000001',
-                projectsV2: {
-                  nodes: [
-                    {
-                      id: 'PVT_kwDOAnsQgs4AP9Qq',
-                      title: 'layer-200/module-1',
-                    },
-                    {
-                      id: 'PVT_000000000000002',
-                      title: 'layer-100/module-2',
-                    },
-                  ],
-                  pageInfo: {
-                    hasNextPage: false,
-                    endCursor: 'Nw',
-                  },
+      })),
+      graphql.query(/paginate/, () => HttpResponse.json({
+        data: {
+          repository: {
+            name: 'example-repository',
+            id: 'R_0000000001',
+            projectsV2: {
+              nodes: [
+                {
+                  id: 'PVT_kwDOAnsQgs4AP9Qq',
+                  title: 'layer-200/module-1',
                 },
+                {
+                  id: 'PVT_000000000000002',
+                  title: 'layer-100/module-2',
+                },
+              ],
+              pageInfo: {
+                hasNextPage: false,
+                endCursor: 'Nw',
               },
             },
           },
         },
-      });
+      })),
+    );
   });
 
-  afterEach(() => {
-    fetchMock.reset();
+  afterAll(() => {
+    server.close();
   });
 
   test('when no change is required', async () => {

apiwrapper.js

@@ -7,7 +7,7 @@ class ApiWrapper {
 
   async createProject({ title, organization, repository }) {
     const { createProjectV2: { projectV2: { id } } } = await this.#octokit.graphql(`
-      mutation {
+      mutation createProject {
         createProjectV2(
           input: {
             ownerId: "${organization.id}",
@@ -27,7 +27,7 @@ class ApiWrapper {
   async fetchOrganiztion({ ownerName }) {
     const { organization } = await this.#octokit.graphql(
       `
-      query {
+      query fetchOrgainzation {
         organization(login: "${ownerName}") {
           id
           name
@@ -68,7 +68,7 @@ class ApiWrapper {
 
   async deleteProject({ project, clientMutationId }) {
     const { projectId: id } = await this.#octokit.graphql(`
-      mutation{
+      mutation deleteProject {
         deleteProjectV2(
           input: {
             clientMutationId: "${clientMutationId}"