Fix some tests and use RTL

src/modules/choose-team/ChooseTeamPage.spec.tsx

@@ -1,41 +1,112 @@
 import React from "react";
-import { mount } from "enzyme";
-import { createMemoryHistory, MemoryHistory } from "history";
-import { act } from "react-dom/test-utils";
-import { findByTestId, withMockedProviders } from "../../spec_helper";
+import { withMockedProviders } from "../../spec_helper";
 import { Content } from "./ChooseTeamPage";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { GET_INVITES } from "./components/InviteList";
+import { GET_TEAMS } from "./components/TeamList";
+
+const mockHistoryPush = jest.fn();
+
+jest.mock("react-router-dom", () => ({
+  ...(jest.requireActual("react-router-dom") as any),
+  useHistory: () => ({
+    push: mockHistoryPush,
+  }),
+}));
+
+const mockWithInvites = [
+  {
+    request: {
+      query: GET_INVITES,
+    },
+    result: {
+      data: {
+        viewer: {
+          teamInvites: [
+            {
+              id: '1',
+              team: {
+                id: '1',
+                name: 'Kabisa',
+              },
+            },
+            {
+              id: '2',
+              team: {
+                id: '2',
+                name: 'Dovetail',
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      query: GET_TEAMS,
+    },
+    result: {
+      data: {
+        viewer: {
+          memberships: [
+            {
+              id: '1',
+              role: 'admin',
+              team: {
+                id: '2',
+                name: 'Team 1',
+              },
+            },
+            {
+              id: '2',
+              role: 'admin',
+              team: {
+                id: '2',
+                name: 'Team 2',
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+];
 
 describe("<ChooseTeamPage />", () => {
-  let wrapper: any;
-  let history: MemoryHistory;
+  it("renders the invite list", async () => {
+    render(withMockedProviders(<Content />, mockWithInvites));
 
-  beforeEach(async () => {
-    history = createMemoryHistory();
+    const inviteList = screen.getByTestId("invite-list");
 
-    await act(async () => {
-      wrapper = mount(withMockedProviders(<Content />));
-    });
+    expect(inviteList).toBeInTheDocument();
   });
 
-  it("renders the invite list", () => {
-    expect(findByTestId(wrapper, "invite-list").length).toBe(1);
-  });
+  it("renders the team list", async () => {
+    render(withMockedProviders(<Content />, mockWithInvites));
 
-  it("renders the team list", () => {
-    expect(wrapper.find("TeamList").length).toBe(1);
+    const teamList = screen.getByTestId("personal-team-list");
+
+    expect(teamList).toBeInTheDocument();
   });
 
   it("renders the create team button", () => {
-    expect(wrapper.find(".button").length).toBe(1);
+    render(withMockedProviders(<Content />, mockWithInvites));
+
+    const createTeamButton = screen.getByRole("button", {
+      name: "Create team",
+    });
+    expect(createTeamButton).toBeInTheDocument();
   });
 
   it("navigates to the create team page", async () => {
-    await act(async () => {
-      findByTestId(wrapper, "create-team").hostNodes().simulate("click");
+    render(withMockedProviders(<Content />, mockWithInvites));
 
-      await wrapper.update();
-
-      expect(history.location.pathname).toBe("/create-team");
+    const createTeamButton = screen.getByRole("button", {
+      name: "Create team",
     });
+    fireEvent.click(createTeamButton);
+
+    expect(mockHistoryPush).toHaveBeenCalledWith("/create-team");
   });
 });

src/modules/choose-team/ChooseTeamPage.tsx

@@ -15,13 +15,12 @@ export function Content(): React.ReactElement {
   return (
     <div className={s.container}>
       <h2 className={s.header}>Your invites</h2>
-      <InviteList data-testid="invite-list" />
+      <InviteList />
       <Divider />
       <h2 className={s.header}>Your teams</h2>
-      <TeamList data-testid="personal-team-list" />
+      <TeamList />
       <Divider horizontal>Or</Divider>
       <Button
-        data-testid="create-team"
         color="blue"
         className={s.create_button}
         onClick={() => {

src/modules/choose-team/CreateTeamPage.spec.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { mount, ReactWrapper } from 'enzyme';
-import { act } from 'react-dom/test-utils';
 import { GraphQLError } from 'graphql';
 import {
-  findByTestId, simulateInputChange, wait, withMockedProviders,
+  withMockedProviders,
 } from '../../spec_helper';
 import CreateTeamPage, { MUTATION_CREATE_TEAM } from './CreateTeamPage';
 import { Storage } from '../../support/storage';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 let mutationCalled = false;
 const mocks = [
@@ -34,110 +34,99 @@ const mocksWithError = [
   },
 ];
 
-
 describe('<CreateTeamPage />', () => {
-  let wrapper: ReactWrapper;
-
   beforeEach(async () => {
     mutationCalled = false;
     Storage.setItem = jest.fn();
-
-    await act(async () => {
-      wrapper = mount(withMockedProviders(<CreateTeamPage />, mocks));
-    });
   });
 
   it('renders a name field', () => {
-    expect(wrapper.find('.field').length).toBe(1);
+    render(
+      withMockedProviders(<CreateTeamPage />, mocks)
+    );
+    const input = screen.getByPlaceholderText("Team name");
+
+    expect(input).toBeInTheDocument();
   });
 
   it('renders the create team button', () => {
-    expect(wrapper.containsMatchingElement(<button>Create team</button>)).toBe(true);
+    render(
+      withMockedProviders(<CreateTeamPage />, mocks)
+    );
+
+    expect(screen.getByRole("button", { name: "Create team" })).toBeInTheDocument();
   });
 
   it('handles input correctly', async () => {
-    const component: any = wrapper.find('CreateTeamPage').instance();
-
-    await act(async () => {
-      expect(component.state.name).toBe('');
+    render(
+      withMockedProviders(<CreateTeamPage />, mocks)
+    );
+    const input = screen.getByPlaceholderText("Team name");
+    expect(input).toHaveValue("");
 
-      simulateInputChange(wrapper, 'name-input', 'name', 'Kabisa');
-      await wrapper.update();
+    fireEvent.change(input, { target: { value: "Kabisa" }});
 
-      expect(component.state.name).toBe('Kabisa');
-    });
+    expect(input).toHaveValue("Kabisa");
   });
 
   it('returns an error if the name is null', async () => {
-    await act(async () => {
-      findByTestId(wrapper, 'create-team-button').hostNodes().simulate('click');
+    render(
+      withMockedProviders(<CreateTeamPage />, mocks)
+    );
+    const button = screen.getByRole("button", { name: "Create team" });
 
-      await wait(0);
-      wrapper.update();
+    userEvent.click(button);
 
-      expect(findByTestId(wrapper, 'error-message').text()).toBe('Name can\'t be blank.');
-    });
+    expect(screen.queryByText("Name can't be blank."));
   });
 
   it('Sets the loading state', async () => {
-    const component = wrapper.find('CreateTeamPage').instance();
-    await act(async () => {
-      component.setState({ name: 'Kabisa' });
-      await wrapper.update();
+    const { container } = render(
+      withMockedProviders(<CreateTeamPage />, mocks)
+    );
+    const input = screen.getByPlaceholderText("Team name");
+    const button = screen.getByRole("button", { name: "Create team" });
 
-      findByTestId(wrapper, 'create-team-button').hostNodes().simulate('click');
+    fireEvent.change(input, { target: { value: "Kabisa" }});
+    userEvent.click(button);
 
-      expect(wrapper.find('.loading').length).toBe(1);
-    });
+    await waitFor(() => expect(container.getElementsByClassName("loading").length).toBe(1));
   });
 
   it('shows when there is an error', async () => {
-    wrapper = mount(withMockedProviders(<CreateTeamPage />, mocksWithError));
-    const component = wrapper.find('CreateTeamPage').instance();
-
-    await act(async () => {
-      component.setState({ name: 'Kabisa' });
-      await wrapper.update();
+    render(
+      withMockedProviders(<CreateTeamPage />, mocksWithError)
+    );
+    const button = screen.getByRole("button", { name: "Create team" });
 
-      findByTestId(wrapper, 'create-team-button').hostNodes().simulate('click');
+    userEvent.click(button);
 
-      await wait(0);
-      await wrapper.update();
-
-      expect(findByTestId(wrapper, 'error-message').text()).toBe('It broke');
-    });
+    expect(screen.queryByText("It broke"));
   });
 
   it('calls the mutation if the name is not null', async () => {
-    const component = wrapper.find('CreateTeamPage').instance();
-    await act(async () => {
-      component.setState({ name: 'Kabisa' });
-      await wrapper.update();
-
-      findByTestId(wrapper, 'create-team-button').hostNodes().simulate('click');
-
-      await wait(0);
+    render(
+      withMockedProviders(<CreateTeamPage />, mocks)
+    );
+    const input = screen.getByPlaceholderText("Team name");
+    const button = screen.getByRole("button", { name: "Create team" });
 
-      wrapper.update();
+    fireEvent.change(input, { target: { value: "Kabisa" }});
+    userEvent.click(button);
 
-      expect(mutationCalled).toBe(true);
-    });
+    await waitFor(() => expect(mutationCalled).toBe(true));
   });
 
   it('sets the team id in local storage if the mutation is successful', async () => {
-    const component = wrapper.find('CreateTeamPage').instance();
-
-    await act(async () => {
-      component.setState({ name: 'Kabisa' });
-      await wrapper.update();
-
-      findByTestId(wrapper, 'create-team-button').hostNodes().simulate('click');
-
-      await wait(0);
+    render(
+      withMockedProviders(<CreateTeamPage />, mocks)
+    );
+    const input = screen.getByPlaceholderText("Team name");
+    const button = screen.getByRole("button", { name: "Create team" });
 
-      wrapper.update();
+    fireEvent.change(input, { target: { value: "Kabisa" }});
+    userEvent.click(button);
 
-      expect(Storage.setItem).toBeCalledWith('team_id', '1');
-    });
+    await waitFor(() => expect(Storage.setItem).toBeCalledWith('team_id', '1'));
   });
 });