feat(catalog/msw): Implementing msw for a test with the CatalogApi Client

plugins/catalog/package.json

@@ -47,9 +47,9 @@
     "@types/jest": "^25.2.2",
     "@types/node": "^12.0.0",
     "@types/testing-library__jest-dom": "^5.0.4",
-    "jest-fetch-mock": "^3.0.3",
     "msw": "^0.19.0",
-    "react-test-renderer": "^16.13.1"
+    "react-test-renderer": "^16.13.1",
+    "whatwg-fetch": "^3.0.0"
   },
   "files": [
     "dist/**/*.{js,d.ts}"

plugins/catalog/src/api/CatalogClient.test.ts

@@ -0,0 +1,68 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { rest } from 'msw';
+import { setupServer } from 'msw/node';
+import { CatalogClient } from './CatalogClient';
+import { DescriptorEnvelope } from '../types';
+
+const server = setupServer();
+
+describe('CatalogClient', () => {
+  beforeAll(() => server.listen());
+  afterEach(() => server.resetHandlers());
+  afterAll(() => server.close());
+
+  describe('getEntities', () => {
+    it('should return the json response for the correct path', async () => {
+      const mockApiOrigin = 'http://backstage:9191';
+      const mockBasePath = '/i-am-a-mock-base';
+      const client = new CatalogClient({
+        apiOrigin: mockApiOrigin,
+        basePath: mockBasePath,
+      });
+
+      const mockDescriptors: DescriptorEnvelope[] = [
+        {
+          apiVersion: '1',
+          kind: 'Component',
+          metadata: {
+            description: 'Im a description',
+            name: 'Test1',
+            namespace: 'test1',
+          },
+        },
+        {
+          apiVersion: '1',
+          kind: 'Component',
+          metadata: {
+            description: 'Im a description',
+            name: 'Test2',
+            namespace: 'test1',
+          },
+        },
+      ];
+      server.use(
+        rest.get(`${mockApiOrigin}${mockBasePath}/entities`, (_, res, ctx) => {
+          return res(ctx.json(mockDescriptors));
+        }),
+      );
+
+      const entities = await client.getEntities();
+
+      expect(entities).toEqual(mockDescriptors);
+    });
+  });
+});

plugins/catalog/src/setupTests.ts

@@ -15,4 +15,4 @@
  */
 
 import '@testing-library/jest-dom';
-require('jest-fetch-mock').enableMocks();
+import 'whatwg-fetch';

yarn.lock

@@ -19117,7 +19117,7 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3, whatwg-encoding@^1.0.5:
   dependencies:
     iconv-lite "0.4.24"
 
-whatwg-fetch@3.0.0:
+whatwg-fetch@3.0.0, whatwg-fetch@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
   integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==