fix: testing-library/react-testing-library#281

Author: Marcelo

.circleci/config.yml

@@ -52,23 +52,19 @@ jobs:
             - .cache/Cypress
           key: v1-dependencies-{{ checksum "package.json" }}
 
-  # test:
-  # docker:
-  #   - image: circleci/node:10
-  # working_directory: ~/app
-  # steps:
-  #   - checkout
-  #   - restore_cache:
-  #       keys:
-  #         - v1-dependencies-{{ checksum "package.json" }}
-  #         - v1-dependencies-
-  #   - run:
-  #       name: Start the application
-  #       command: NODE_ENV=production yarn start
-  #       background: true
-  #   - run:
-  #       name: Run tests
-  #       command: yarn e2e-wait
+  test:
+    docker:
+      - image: circleci/node:10
+    working_directory: ~/app
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - v1-dependencies-{{ checksum "package.json" }}
+            - v1-dependencies-
+      - run:
+          name: Run unit tests
+          command: yarn test-client
 
   cypress/run:
     docker:
@@ -104,10 +100,13 @@ workflows:
       - build:
           requires:
             - setup
-      - cypress/run:
-          yarn: true
-          cache-key: 'yarn-packages-{{ arch }}-{{ checksum "yarn.lock" }}'
-          start: yarn start
-          wait-on: "http-get://localhost:3000"
-          requires:
+      - test
+          requires: 
             - build
+      # - cypress/run:
+      #     yarn: true
+      #     cache-key: 'yarn-packages-{{ arch }}-{{ checksum "yarn.lock" }}'
+      #     start: yarn start
+      #     wait-on: "http-get://localhost:3000"
+      #     requires:
+      #       - build

azure-pipelines.yml

@@ -8,9 +8,13 @@ steps:
   - task: NodeTool@0
     inputs:
       versionSpec: "10.x"
-    displayName: "Install dependencies and build app"
+    displayName: "Install node"
 
   - script: |
       yarn install
       yarn build
-    displayName: "yarn install and build"
+    displayName: "Install dependencies and build app"
+
+  - script: |
+      yarn test-client
+    displayName: "Run unit tests"

src/client/modules/auth/AuthConnector.tsx

@@ -3,7 +3,7 @@ import {
   GetGroupIdFromUserIdGetGroupIdFromUserId,
   GetUserIdFromSessionGetUserIdFromSession
 } from "../../__types__/typeDefs";
-import Home from "../home/ui";
+import { Home } from "../home/ui";
 import { Auth } from "./ui";
 
 interface Props {

src/client/modules/controller/ui/index.tsx

@@ -59,7 +59,7 @@ const Controller: React.FunctionComponent<Props> = props => {
     <Query<GetThingFromTopicQuery, GetThingFromTopicVariables>
       query={getThingFromTopic}
       variables={{
-        topic: topic
+        topic
       }}
     >
       {({ data, loading }) => {
@@ -112,7 +112,7 @@ const Controller: React.FunctionComponent<Props> = props => {
                   {
                     query: getThingFromTopic,
                     variables: {
-                      topic: topic
+                      topic
                     }
                   }
                 ]}
@@ -125,7 +125,7 @@ const Controller: React.FunctionComponent<Props> = props => {
                       await mutate({
                         variables: {
                           toggle: JSON.stringify(thingState),
-                          topic: topic
+                          topic
                         }
                       });
                     }}

src/client/modules/home/ui/components/Components/__tests__/index.client.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import "@testing-library/jest-dom/extend-expect";
+import { cleanup, wait } from "@testing-library/react";
+import { renderWithRouter } from "../../../../../../utils/renderWithRouter";
+import { Components } from "..";
+import { act } from "react-dom/test-utils";
+
+afterEach(cleanup);
+
+describe("<Components /> test case", () => {
+  test("Renders loading feedback and no components", async () => {
+    const { container } = renderWithRouter(
+      <Components groupId={{ id: "1" }} />,
+      {
+        route: "/"
+      }
+    );
+
+    act(() => {
+      expect(container.innerHTML).toMatch("loading...");
+    });
+
+    await wait(() => {
+      expect(container.innerHTML).toMatch("You have no components yet");
+    });
+  });
+});

src/client/modules/home/ui/components/Components/index.tsx

@@ -20,7 +20,7 @@ export const Components: React.FunctionComponent<Props> = props => {
     "This is the topic which you need to subscribe the related module to.";
 
   return (
-    <div className="components">
+    <div className="components" data-testid="components">
       <Query<GetThingsFromGroupIdQuery, GetThingsFromGroupIdVariables>
         query={getThingsFromGroupId}
         variables={{
@@ -35,31 +35,45 @@ export const Components: React.FunctionComponent<Props> = props => {
             data.getThingsFromGroupId.length === 0
           ) {
             return (
-              <div className="component no-component">
+              <div
+                className="component no-component"
+                data-testid="no-component"
+              >
                 <span>You have no components yet</span>
               </div>
             );
           }
           return (
             <>
               {help ? (
-                <div className="help-box">
+                <div className="help-box" data-testid="help-box">
                   <span>{helpText}</span>
                 </div>
               ) : null}
               {data.getThingsFromGroupId.map((thing, i) => {
                 return (
                   <React.Fragment key={i}>
                     <Link to={thing.topic}>
-                      <div className="component" key={i}>
-                        <div className="component-space">
+                      <div
+                        className="component"
+                        key={i}
+                        data-testid={`component-${i}`}
+                      >
+                        <div
+                          className="component-space"
+                          data-testid={`component-space-${i}`}
+                        >
                           <span>{thing.space}</span>
                         </div>
-                        <div className="component-itself">
+                        <div
+                          className="component-itself"
+                          data-testid={`component-itself-${i}`}
+                        >
                           <span>{thing.component}</span>
                         </div>
                         <div
                           className="component-topic"
+                          data-testid={`component-topic-${i}`}
                           onMouseEnter={() => setHelp(true)}
                           onMouseLeave={() => setHelp(false)}
                         >

src/client/modules/home/ui/components/ComponentsDashboard/__tests__/index.client.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import "@testing-library/jest-dom/extend-expect";
+import { cleanup, wait } from "@testing-library/react";
+import { renderWithRouter } from "../../../../../../utils/renderWithRouter";
+import { ComponentsDashboard } from "..";
+
+afterEach(cleanup);
+
+describe("<ComponentsDashboard /> test case", () => {
+  test("Full component rendering/navigation", async () => {
+    const { getByTestId } = renderWithRouter(
+      <ComponentsDashboard groupId={{ id: "1" }} />,
+      {
+        route: "/"
+      }
+    );
+
+    await wait(() => {
+      expect(getByTestId("components-dashboard-wrapper")).toBeInTheDocument();
+      expect(getByTestId("components-dashboard")).toBeInTheDocument();
+    });
+  });
+});

src/client/modules/home/ui/components/ComponentsDashboard/index.tsx

@@ -19,8 +19,14 @@ export const ComponentsDashboard: React.FunctionComponent<Props> = observer(
     return (
       <>
         <StatusBar groupId={props.groupId} />
-        <div className="components-dashboard-wrapper">
-          <div className="components-dashboard">
+        <div
+          className="components-dashboard-wrapper"
+          data-testid="components-dashboard-wrapper"
+        >
+          <div
+            className="components-dashboard"
+            data-testid="components-dashboard"
+          >
             <NewComponentButton />
             {newComponentStore.form ? (
               <NewComponentForm groupId={props.groupId} />

src/client/modules/home/ui/components/ErrorMessage/__tests__/index.client.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import "@testing-library/jest-dom/extend-expect";
+import { cleanup } from "@testing-library/react";
+import { renderWithRouter } from "../../../../../../utils/renderWithRouter";
+import { ErrorMessage } from "..";
+
+afterEach(cleanup);
+
+describe("<ErrorMessage /> test case", () => {
+  test("Full component rendering/navigation", () => {
+    const errorMessage = "Oooops, this is an error message";
+    const { getByTestId, getByText } = renderWithRouter(
+      <ErrorMessage errorMessage={errorMessage} />
+    );
+
+    expect(getByTestId("error-message-wrapper")).toBeInTheDocument();
+    expect(getByTestId("error-message")).toBeInTheDocument();
+    expect(getByText(errorMessage)).toBeInTheDocument();
+  });
+});

src/client/modules/home/ui/components/ErrorMessage/index.tsx

@@ -7,8 +7,8 @@ interface Props {
 
 export const ErrorMessage: React.SFC<Props> = props => {
   return (
-    <div className="error-message-wrapper">
-      <div className="error">
+    <div className="error-message-wrapper" data-testid="error-message-wrapper">
+      <div className="error-message" data-testid="error-message">
         <span>{props.errorMessage}</span>
       </div>
     </div>

src/client/modules/home/ui/components/__tests__/index.client.tsx

@@ -1,15 +1,20 @@
 import * as React from "react";
-import Home from "../..";
+import { Home } from "../../";
 import { renderWithRouter } from "../../../../../utils/renderWithRouter";
 import "@testing-library/jest-dom/extend-expect";
+import { cleanup, wait } from "@testing-library/react";
+
+afterEach(cleanup);
 
 describe("<Home /> test case", () => {
-  test("Full component rendering/navigation", () => {
-    const { container, getByTestId } = renderWithRouter(
-      <Home groupId={{ id: "1" }} />
-    );
+  test("Full component rendering/navigation", async () => {
+    const { getByTestId } = renderWithRouter(<Home groupId={{ id: "1" }} />, {
+      route: "/"
+    });
 
-    expect(getByTestId("home-wrapper")).toBeInTheDocument();
-    expect(getByTestId("home")).toBeInTheDocument();
+    await wait(() => {
+      expect(getByTestId("home-wrapper")).toBeInTheDocument();
+      expect(getByTestId("home")).toBeInTheDocument();
+    });
   });
 });

src/client/modules/home/ui/index.tsx

@@ -7,7 +7,7 @@ interface Props {
   groupId: GetGroupIdFromUserIdGetGroupIdFromUserId;
 }
 
-const Home: React.FunctionComponent<Props> = props => {
+export const Home: React.FunctionComponent<Props> = props => {
   return (
     <div className="home-wrapper" data-testid="home-wrapper">
       <div className="home" data-testid="home">
@@ -16,5 +16,3 @@ const Home: React.FunctionComponent<Props> = props => {
     </div>
   );
 };
-
-export default Home;

src/client/utils/renderWithRouter.tsx

@@ -2,18 +2,19 @@ import * as React from "react";
 import { createMemoryHistory, MemoryHistory } from "history";
 import { render } from "@testing-library/react";
 import { Router } from "react-router";
-import { MockedProvider } from "@apollo/react-testing";
+import { MockedProvider, MockedResponse } from "@apollo/react-testing";
 
 export const renderWithRouter = (
   ui: React.ReactElement,
   {
     route = "/",
     history = createMemoryHistory({ initialEntries: [route] })
-  }: { route?: string; history?: MemoryHistory<any> } = {}
+  }: { route?: string; history?: MemoryHistory<any> } = {},
+  mocks?: MockedResponse[]
 ) => {
   return {
     ...render(
-      <MockedProvider>
+      <MockedProvider mocks={mocks} addTypename={false}>
         <Router history={history}>{ui}</Router>
       </MockedProvider>
     ),

tslint.json

@@ -25,7 +25,8 @@
     "curly": [false, "ignore-same-line"],
     "no-shadowed-variable": false,
     "interface-name": false,
-    "no-unused-expression": false
+    "no-unused-expression": false,
+    "interface-over-type-literal": false
   },
   "rulesDirectory": []
 }