* remove enzyme

* tidy up mocked data

src/client/package.json

@@ -70,13 +70,9 @@
   ],
   "devDependencies": {
     "@testing-library/jest-dom": "^5.5.0",
-    "@types/enzyme": "^3.10.5",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/redux-mock-store": "^1.0.2",
     "@typescript-eslint/eslint-plugin": "^4.15.1",
     "@typescript-eslint/parser": "^4.15.1",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^7.20.0",
     "eslint-config-prettier": "^8.0.0",
     "eslint-plugin-prettier": "^3.3.1",

src/client/src/components/RightSidebar/ServicesList/ServicesList.test.tsx

@@ -1,14 +1,12 @@
 import * as React from "react";
-import { Provider } from "react-redux";
 import configureMockStore from "redux-mock-store";
 
 import { getInitialState } from "../../../mockData/mockStore";
-import AppServiceSelection from "./AppServiceSelection";
-import CosmosDBSelection from "./CosmosDBSelection";
+import { renderWithStore } from "../../../testUtils";
+import appServiceMessages from "./AppServiceSelection/messages";
+import cosmosDBMessages from "./CosmosDBSelection/messages";
 import ServicesList from "./index";
 
-const mockStore = configureMockStore();
-
 const emptyCosmosDB = null;
 const emptyAppService = null;
 
@@ -20,22 +18,22 @@ const mockVsCode = {
 
 describe("ServicesList", () => {
   let props: any;
+  let store: any;
   let wrapper: any;
   let initialState: any;
 
+  const mockStore = configureMockStore();
+
   describe("When has not selected AppService in store", () => {
     beforeEach(() => {
       initialState = getInitialState();
+      store = mockStore(initialState);
       initialState.userSelection.services = {
         appService: emptyAppService,
       };
       initialState.vscode = mockVsCode;
 
-      wrapper = mountWithIntl(
-        <Provider store={mockStore(initialState)}>
-          <ServicesList {...props} />
-        </Provider>
-      ).children();
+      wrapper = renderWithStore(<ServicesList {...props} />, store);
     });
 
     it("renders without crashing", () => {
@@ -43,13 +41,13 @@ describe("ServicesList", () => {
     });
 
     it("Should not have a rendered AppServiceSelection component", () => {
-      const appServiceComponent = wrapper.find(AppServiceSelection);
-      expect(appServiceComponent).toHaveLength(0);
+      expect(wrapper.queryByText(intl.formatMessage(appServiceMessages.title))).not.toBeInTheDocument();
     });
   });
 
   describe("When has selected AppService in store", () => {
     beforeEach(() => {
+      store = mockStore(initialState);
       const appService = { ...emptyAppService, selection: {} };
       initialState = getInitialState();
       initialState.userSelection.services = {
@@ -57,11 +55,7 @@ describe("ServicesList", () => {
       };
       initialState.vscode = mockVsCode;
 
-      wrapper = mountWithIntl(
-        <Provider store={mockStore(initialState)}>
-          <ServicesList {...props} />
-        </Provider>
-      ).children();
+      wrapper = renderWithStore(<ServicesList {...props} />, store);
     });
 
     it("renders without crashing", () => {
@@ -69,24 +63,21 @@ describe("ServicesList", () => {
     });
 
     it("Should have a rendered AppServiceSelection component", () => {
-      const appServiceComponent = wrapper.find(AppServiceSelection);
-      expect(appServiceComponent).toHaveLength(1);
+      const appServiceComponent = wrapper.getByText(intl.formatMessage(appServiceMessages.title));
+      expect(appServiceComponent).toBeDefined();
     });
   });
 
-  describe("When hasn not selected CosmosDB service in store", () => {
+  describe("When has not selected CosmosDB service in store", () => {
     beforeEach(() => {
       initialState = getInitialState();
+      store = mockStore(initialState);
       initialState.userSelection.services = {
         cosmosDB: emptyCosmosDB,
       };
       initialState.vscode = mockVsCode;
 
-      wrapper = mountWithIntl(
-        <Provider store={mockStore(initialState)}>
-          <ServicesList {...props} />
-        </Provider>
-      ).children();
+      wrapper = renderWithStore(<ServicesList {...props} />, store);
     });
 
     it("renders without crashing", () => {
@@ -94,8 +85,7 @@ describe("ServicesList", () => {
     });
 
     it("Should not have a rendered CosmosDBSelection component", () => {
-      const cosmosDBComponent = wrapper.find(CosmosDBSelection);
-      expect(cosmosDBComponent).toHaveLength(0);
+      expect(wrapper.queryByText(intl.formatMessage(cosmosDBMessages.title))).not.toBeInTheDocument();
     });
   });
 
@@ -104,14 +94,11 @@ describe("ServicesList", () => {
       const cosmosDB = { ...emptyCosmosDB, selection: ["any"] };
 
       initialState = getInitialState();
+      store = mockStore(initialState);
       initialState.userSelection.services = { cosmosDB };
       initialState.vscode = mockVsCode;
 
-      wrapper = mountWithIntl(
-        <Provider store={mockStore(initialState)}>
-          <ServicesList {...props} />
-        </Provider>
-      ).children();
+      wrapper = renderWithStore(<ServicesList {...props} />, store);
     });
 
     it("renders without crashing", () => {
@@ -119,8 +106,8 @@ describe("ServicesList", () => {
     });
 
     it("Should have a rendered CosmosDBSelection component", () => {
-      const cosmosDBComponent = wrapper.find(CosmosDBSelection);
-      expect(cosmosDBComponent).toHaveLength(1);
+      const cosmosDBComponent = wrapper.getByText(intl.formatMessage(cosmosDBMessages.title));
+      expect(cosmosDBComponent).toBeDefined();
     });
   });
 });

src/client/src/mockData/extensionModules/mockData/mockReactNativePlatformData.ts

@@ -53,9 +53,9 @@ const projectTypes = [
   {
     name: "Tabbed",
     displayName: "Tabbed",
-    summary: "Tabbed summary ***",
-    body: "Tabbed description***",
-    description: "Tabbed rich description***",
+    summary: "Tabbed summary",
+    body: "Tabbed description",
+    description: "Tabbed rich description",
     licenses:
       "[React Native](https://github.com/facebook/react-native/blob/master/LICENSE)\n [React Navigation](https://github.com/react-navigation/react-navigation/blob/main/packages/core/LICENSE)",
     icon: projectTypeImage,
@@ -64,9 +64,9 @@ const projectTypes = [
   {
     name: "Drawer",
     displayName: "Drawer",
-    summary: "Drawer summary ***",
-    body: "Drawer description***",
-    description: "Drawer rich description***",
+    summary: "Drawer summary",
+    body: "Drawer description",
+    description: "Drawer rich description",
     licenses:
       "[React Native](https://github.com/facebook/react-native/blob/master/LICENSE)\n [React Navigation](https://github.com/react-navigation/react-navigation/blob/main/packages/core/LICENSE)",
     icon: noImage,
@@ -76,12 +76,12 @@ const projectTypes = [
 
 const frameworks = [
   {
-    name: "React Native MOCK",
-    displayName: "React Native MOCK",
+    name: "React Native",
+    displayName: "React Native",
     icon: frontendImage,
     summary: "JavaScript framework by Facebook",
     description:
-      "MOCKED DESCRIPTION React is a component-based open source JavaScript library for building interfaces for single page applications. It is used for handling view layer for web and mobile apps. React allows you to design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.  \r\n\r\n  \r\nMore information about React can be found [here](https://reactjs.org).\r\n",
+      "React is a component-based open source JavaScript library for building interfaces for single page applications. It is used for handling view layer for web and mobile apps. React allows you to design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.  \r\n\r\n  \r\nMore information about React can be found [here](https://reactjs.org).\r\n",
     author: "Facebook",
     order: 1,
     metadataType: "Framework",

src/client/src/setupTests.ts

@@ -1,46 +1,11 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
 import "@testing-library/jest-dom";
 
-import { configure, mount, shallow } from "enzyme";
-import Adapter from "enzyme-adapter-react-16";
-import React from "react";
-import { IntlProvider, intlShape } from "react-intl";
-
-/**
- * This setup file configures the Enzyme Adapter and is executed before running the tests
- * https://facebook.github.io/create-react-app/docs/running-tests#initializing-test-environment
- */
-configure({ adapter: new Adapter() });
+import { IntlProvider } from "react-intl";
 
 const intlProvider = new IntlProvider({ locale: "en" }, {});
 const { intl } = intlProvider.getChildContext();
 global.intl = intl;
-
-//https://medium.com/@sapegin/testing-react-intl-components-with-jest-and-enzyme-f9d43d9c923e
-// `intl` prop is required when using injectIntl HOC
-const nodeWithIntlProp = (node) => React.cloneElement(node, { intl });
-
-// shallow() with React Intl context
-global.shallowWithIntl = (node, { context, ...options } = {}) => {
-  return shallow(nodeWithIntlProp(node), {
-    ...options,
-    context: {
-      ...context,
-      intl,
-    },
-  });
-};
-
-// mount() with React Intl context
-global.mountWithIntl = (node, { context, childContextTypes, ...options } = {}) => {
-  return mount(nodeWithIntlProp(node), {
-    ...options,
-    context: {
-      ...context,
-      intl,
-    },
-    childContextTypes: {
-      intl: intlShape,
-      ...childContextTypes,
-    },
-  });
-};