@testing-library/react#act JavaScript Examples

// trying to figure out how to test calculator
test('should show the correct outputs given inputs', async () => {
  const { getByText, getByTestId } = render(
    <Router>
      <Calculator />
    </Router>
  );
  const deviceButton = getByTestId('desktop');
  const stateInput = getByText(/texas/i);
  const hoursInput = getByTestId('hourlyUse');
  const daysInput = getByTestId('daysPerWeek');

  act(() => {
    fireEvent.change(deviceButton, { target: { value: 'Computer Desktop' } });
    fireEvent.change(stateInput, {
      target: { value: 'Texas' },
    });
    fireEvent.change(hoursInput, {
      target: { value: 5 },
    });
    fireEvent.change(daysInput, {
      target: { value: 5 },
    });
  });
  const costPerYear = getByTestId('costPerYear');
  const energyUsed = getByTestId('energyUsed');
  await expect(costPerYear).toContain(0);
  await expect(energyUsed).toContain(0);
});

describe('Table', () => {
  test('given initial render, returns loading message', () => {
    render(
      <MockedProvider mocks={mocks}>
        <Table />
      </MockedProvider>
    )
    expect(screen.getByText(/Loading.../)).toBeInTheDocument()
  })

  test('given completed state, renders employee data', async () => {
    render(
      <MockedProvider mocks={mocks}>
        <Table />
      </MockedProvider>
    )
    await act(() => new Promise(resolve => setTimeout(resolve, 0)))

    expect(screen.getAllByTestId('row').length).toEqual(2)
  })

  test('given error state, renders error message', async () => {
    const mocks = [{ request: { query: EMPLOYEES }, error: new Error() }]

    render(
      <MockedProvider mocks={mocks}>
        <Table />
      </MockedProvider>
    )
    await act(() => new Promise(resolve => setTimeout(resolve, 0)))

    expect(screen.getByText(/error/i)).toBeInTheDocument()
  })
})

describe('ConnectWalletButton', () => {
  it('opens extension download URL when extension is not available', async () => {
    connectExtension.mockRejectedValue({ reason: EXTENSION_UNAVAILABLE })

    const windowOpenSpy = jest.spyOn(window, 'open').mockImplementation();

    render(<ConnectWalletButton />);

    await act(async () => {
      await userEvent.click(screen.getByText('Connect Wallet'));
    })

    expect(windowOpenSpy).toHaveBeenCalledWith('https://chrome.google.com/webstore/detail/terra-station/aiifbnbfobpmeekipheeijimdpnlpgpp');
    expect(connectExtension).toHaveBeenCalledTimes(1);

    windowOpenSpy.mockRestore();
  });

  it('displays connecting indicator while connecting' +
    'and then passes wallet/payload to onConnect function when connected', async () => {
    const wallet = jest.fn();

    connectExtension.mockResolvedValue(wallet);

    render(<ConnectWalletButton />);

    await act(async () => {
      await userEvent.click(screen.getByText('Connect Wallet'));
    })

    expect(connectExtension).toHaveBeenCalledTimes(1);
    expect(mockConnectWallet).toHaveBeenCalledTimes(1);
    expect(mockConnectWallet).toHaveBeenCalledWith(wallet);
  });
});

it('opens homepage after successful login', async () => {
  axiosMock.post.mockResolvedValue({
    data: { auth_token: '49848aadad98a8c8acc8a4c84' },
  });
  const { getByText, getAllByDisplayValue, getByTestId } = render(<App />, {
    wrapper: MemoryRouter,
  });
  const submitBtn = getByTestId('submit');
  const inputs = getAllByDisplayValue('');
  const emailInput = inputs[0];
  const passwordInput = inputs[1];
  await act(async () => {
    await fireEvent.change(emailInput, {
      target: { value: '[email protected]' },
    });
    fireEvent.change(passwordInput, { target: { value: 'admin' } });

    fireEvent.click(submitBtn);
  });

  expect(axiosMock.post).toHaveBeenCalled();
  const homepage = getByText('Inventory Management Home');
  expect(homepage).toBeInTheDocument();
});

test("detects user changed language", async () => {
  let app;
  act(() => {
    app = render(<App />);
  });

  await act(async () => {
    // User selects a language
    const button = app.getByTestId("dashboard-mock-fn-language-change");
    expect(button).toBeInTheDocument();
    fireEvent.click(button);

    // Execute events block in current event loop
    await delay(0);

    const status = app.getByTestId("dashboard-mock-language");
    expect(status).toHaveTextContent("tested");
  });
});

describe("LocationInput", () => {
  it("renders", () => {
    const { getByLabelText, getAllByText, getByText } = render(
      <TestComponent>
        {(addr, setAddr) => (
          <LocationInput
            value={addr}
            inputProps={{ label: "Location" }}
            onChange={({ value, geocoded }) => setAddr(value)}
          />
        )}
      </TestComponent>
    );
    act(() => {
      userEvent.type(getByLabelText(/Location/), "123");
    });
    act(() => {
      userEvent.click(getAllByText("Denver")[0]);
    });
    expect(getByLabelText("Location (Optional)").value).toBe("Denver, CO, USA");
  });
});

describe('test <Modal/> component', () => {
  beforeEach(() => {
    render(<Modal {...modalProps} />);
  });

  it('should render <Modal /> component', () => {
    expect(screen.queryByText(modalProps.message)).toBeInTheDocument();
    expect(screen.queryByText('common.buttons.confirm')).toBeInTheDocument();
    expect(screen.queryByText('common.buttons.cancel')).toBeInTheDocument();
    expect(screen.queryByText('common.modalHeader')).toBeInTheDocument();
  });

  it('call onAction with true', () => {
    const confirmButton = screen.queryByText('common.buttons.confirm');
    act(() => {
      fireEvent.click(confirmButton);
    });

    expect(modalProps.onAction).toHaveBeenCalledWith(true);
  });

  it('call onAction with false', () => {
    const cancelButton = screen.queryByText('common.buttons.cancel');
    act(() => {
      fireEvent.click(cancelButton);
    });

    expect(modalProps.onAction).toHaveBeenCalledWith(false);
  });

  it('call onAction with false', () => {
    const closeModalIcon = screen.queryByTestId('closeModalIcon');
    act(() => {
      fireEvent.click(closeModalIcon);
    });

    expect(modalProps.onAction).toHaveBeenCalledWith(false);
  });
});

it("does not show dates and slot numbers if there aren't any appointments (onlyShowAvailable)", async () => {
    await act(async () => {
        render(
            <Availability
                onlyShowAvailable={true}
                entry={{
                    hasAppointments: false,
                    signUpLink: "",
                    appointmentData: {},
                }}
            />
        );
    });
    expect(screen.getByTestId("no-availability")).toBeTruthy();
});

removeOption(index) {
    const closeButton = this.getCloseButton(index);

    const event = document.createEvent("SVGEvents");
    event.initEvent("click", true, true);

    act(() => {
      closeButton.dispatchEvent(event);
    });
  }

it("It Renders <UserInfo/> without crashing", async () => {
    const removeUser = jest.fn()
    const fakeUser = {
        id: "1",
        name: "John",
        surname: "Marcus",
        username: "johnny",
        email: "[email protected]",
        password: "some-strong-password",
    };
    // Simulate an async call
    global.fetch = jest.fn().mockImplementation(() =>
        Promise.resolve({
            json: () => Promise.resolve(fakeUser),
        })
    );

    // Use the asynchronous version of act to apply resolved promises\
    let utils
    //act makes sure all updates related to the component like event, rendering or data fetch are applied to the DOM
    await act(async () => {
        utils = render(<UserInfo user={fakeUser} removeUser={removeUser} />);
    })
    const { container } = utils;

    expect(container.textContent).toContain(fakeUser.name);
    expect(container.textContent).toContain(fakeUser.surname);
    expect(container.textContent).toContain(fakeUser.email);
    expect(container.textContent).toContain(fakeUser.username);

})

test.each([false, true])(
  'Menu is unmounted before opening and closes after losing focus (portal = %s)',
  async (portal) => {
    utils.renderMenu({ portal });

    // menu is unmounted
    utils.expectButtonToBeExpanded(false);
    utils.expectMenuToBeInTheDocument(false);
    expect(queryByRole('menuitem')).not.toBeInTheDocument();

    // Click the menu button, menu is expected to mount and open, and get focus
    utils.clickMenuButton();
    utils.expectButtonToBeExpanded(true);
    utils.expectMenuToHaveState('opening', false);
    utils.expectMenuToBeOpen(true);
    expect(utils.queryMenu()).toHaveAttribute('aria-label', 'Open');
    await waitFor(() => utils.expectMenuToHaveFocus());
    const menuItems = queryAllByRole('menuitem');
    expect(menuItems).toHaveLength(3);
    menuItems.forEach((item) => utils.expectMenuItemToBeHover(item, false));

    // focus something outside menu, expecting menu to close but keep mounted
    act(() => queryByRole('button').focus());
    utils.expectButtonToBeExpanded(false);
    utils.expectMenuToHaveState('closing', false);
    utils.expectMenuToBeOpen(false);
  }
);

test('renders component correctly', async () => {
  let getByLabelText;

  await act(async () => {
    ({ getByLabelText } = render(<MemeCreator />));
  });

  const selectElement = getByLabelText(/meme template/i);
  expect(selectElement).toBeInTheDocument();
  const inputElement = getByLabelText(/meme caption/i);
  expect(inputElement).toBeInTheDocument();
});

describe('captureDetail', () => {
  let api;
  let captureValues;

  beforeEach(() => {
    //mock the api
    api = require('../../api/treeTrackerApi').default;

    api.getCaptureById = (_id) => {
      log.debug('mock getCaptureById:');
      return Promise.resolve(CAPTURE);
    };
    api.getSpeciesById = (_id) => {
      log.debug('mock getSpeciesById');
      return Promise.resolve(SPECIES[0]);
    };
    api.getTagById = (_id) => {
      log.debug('mock getTagById');
      return Promise.resolve(TAG);
    };
  });

  describe('with a default context', () => {
    beforeEach(async () => {
      captureValues = {
        capture: null,
        species: null,
        tags: [],
        getCaptureDetail: () => {},
        getSpecies: () => {},
        getTags: () => {},
        reset: () => {},
      };

      render(
        <ThemeProvider theme={theme}>
          <BrowserRouter>
            <AppProvider>
              <CaptureDetailProvider value={captureValues}>
                <CaptureDetailDialog
                  open={true}
                  // TransitionComponent={transition}
                  capture={{ id: 0 }}
                />
              </CaptureDetailProvider>
            </AppProvider>
          </BrowserRouter>
        </ThemeProvider>
      );

      await act(() => api.getCaptureById());
    });

    afterEach(cleanup);

    describe('query captureDetail', () => {
      beforeEach(async () => {
        // await CapturesContext.getCaptureDetail(0);
      });

      it('loaded captureDetail', () => {
        // screen.logTestingPlaygroundURL();
        expect(screen.getByText(/[email protected]/i));
        expect(screen.getByText(/new_tree/i));
        expect(screen.getByText(/simple_leaf/i));
      });
    });
  });
});

sleep = async function (duration = 0) {
  // NOTE: act() by itself is typically synchronous, but if you make an async
  //  call in the handler function you give it, you'll get the promise back
  //  and you should await, hence what we're doing here
  await act(() => new Promise((resolve) => setTimeout(resolve, duration)));
}

describe('AvailableTasks', () => {
  let mockStore = configureStore();
  let props;

  beforeEach(() => {
    props = {
      openTaskModal: jest.fn(),
    };
  });

  afterEach(() => {
    jest.clearAllMocks();
  });

  it.skip('should render correctly', async () => {
    fetchAvailableTasks.mockImplementation(
      async () => availableTasksTableItems
    );

    const { asFragment } = act(async () => {
      render(
        <MemoryRouter keyLength={0}>
          <AvailableTasks {...props} />
        </MemoryRouter>
      );
    });

    expect(asFragment()).toMatchSnapshot();
  });

  it.skip('should fetch api data and build table', async () => {
    fetchAvailableTasks.mockImplementation(
      async () => availableTasksTableItems
    );

    const store = mockStore(props);
    await act(async () => {
      render(
        <MemoryRouter keyLength={0}>
          <Provider store={store}>
            <AvailableTasks {...props} />
          </Provider>
        </MemoryRouter>
      );
    });

    waitFor(() => {
      expect(
        screen.getByLabelText('available-tasks-table').toBeInTheDocument()
      );
      expect(screen.getByLabelText('taska').toBeInTheDocument());
    });
  });

  it.skip('should render error', async () => {
    const mockedNotification = jest.fn();
    fetchAvailableTasks.mockImplementation(
      async () => availableTasksTableError
    );
    dispatchNotification.mockImplementation(mockedNotification);

    const store = mockStore(props);
    await act(async () => {
      render(
        <MemoryRouter keyLength={0}>
          <Provider store={store}>
            <AvailableTasks {...props} />
          </Provider>
        </MemoryRouter>
      );
    });

    waitFor(() => {
      //const thing = screen.getByLabelText('taska');
      expect(screen.getByLabelText('taska')).toBeTruthy();
    });
  });
});

it('successfully logs in to home page', async () => {
  /* There is a bug related to localStorage testing. 
  Hence we use this method, but changing prototype is not recommeded */

  /* localStorage Mock* */
  const localStorageMock = {
    getItem: jest.fn(),
    setItem: jest.fn(),
    clear: jest.fn(),
  };
  Object.setPrototypeOf(global.localStorage, localStorageMock);

  /* axios Mock resolved value */
  axiosMock.post.mockResolvedValue({
    data: { auth_token: '49848aadad98a8c8acc8a4c84' },
  });

  const { getByText, getAllByDisplayValue, getByTestId } = render(<Login />, {
    wrapper: MemoryRouter,
  });

  const submitBtn = getByTestId('submit');
  const inputs = getAllByDisplayValue('');
  const emailInput = inputs[0];
  const passwordInput = inputs[1];

  await act(async () => {
    await fireEvent.change(emailInput, {
      target: { value: '[email protected]' },
    });
    fireEvent.change(passwordInput, { target: { value: 'admin' } });

    fireEvent.click(submitBtn);
  });

  const err = getByText('Invalid email or password. Please try again');

  expect(axiosMock.post).toHaveBeenCalled();
  expect(err).not.toBeVisible();
  expect(localStorage.setItem).toBeCalledWith(
    'token',
    '49848aadad98a8c8acc8a4c84'
  );
});

test('renders error when some `render` throws an error and reloads page when the button is clicked', async () => {
  const text = "I'm a child"
  const error = "I'm an error"
  const BuggyChild = (props) => {
    throw new Error(error)
  }

  let errorCatcher
  await act(async () => {
    const { output, fn } = await catchConsoleError(() => {
      errorCatcher = render(
        <ErrorCatcher>
          {/* Buggy's siblings are not shown, either */}
          <div>{text}</div>
          <BuggyChild>
            <div>{text}</div>
          </BuggyChild>
        </ErrorCatcher>
      )
    })

    expect(fn).toHaveBeenCalledTimes(2)
    expect(output[0].includes(error)).toBe(true)

    const childError = errorCatcher.getByText(error)
    expect(childError).toBeInTheDocument()

    expect(() => errorCatcher.getByText(text)).toThrowError(
      /Unable to find an element/
    )
  })

  act(() => {
    const button = errorCatcher.getByText(
      'ErrorCatcher.Try reloading the app to recover from it'
    )
    expect(button).toBeInTheDocument()

    // Mock page reloader
    Object.defineProperty(window, 'location', {
      writable: true,
      value: { reload: jest.fn() }
    })

    fireEvent.click(button)
    expect(window.location.reload).toHaveBeenCalled()
  })
})

describe("when provider is signing up", () => {
  describe("the initial render", () => {
    it("displays the page title", () => {
      const { getByText } = renderComponent();
      expect(getByText("Post a Request")).toBeInTheDocument();
    });
    it("displays both steps", () => {
      const { getByText } = renderComponent();
      expect(getByText("About You")).toBeInTheDocument();
      expect(getByText("Request")).toBeInTheDocument();
    });
  });

  describe("and the form is filled out", () => {
    it("displays success message", async () => {
      const createMutationArgs = {
        firstName: "joe",
        lastName: "",
        neighborhood: "",
        city: "Denver",
        state: "CO",
        email: "[email protected]",
        country: "United States",
        latitude: 123.45,
        longitude: 123.45,
        facility: "",
        role: "nurse",
        requests: ["pets"],
        description: "test",
        address: "Denver, CO, USA",
      };
      const createMutationResult = {
        errors: [],
        provider: {
          id: 1,
        },
      };
      const { getByLabelText, getByText, getAllByText } = renderComponent({
        createMutationArgs,
        createMutationResult,
      });
      userEvent.click(getByLabelText("Pet care"));
      userEvent.type(
        getByLabelText(/Describe your request/),
        createMutationArgs.description
      );
      userEvent.click(getByText("Next"));
      userEvent.type(
        getByLabelText(/First name/),
        createMutationArgs.firstName
      );
      userEvent.type(getByLabelText(/Location/), createMutationArgs.city);
      userEvent.selectOptions(getByLabelText(/Your Job Title \/ Role/), [
        createMutationArgs.role,
      ]);
      userEvent.type(getByLabelText(/Email/), createMutationArgs.email);
      await act(async () => {
        userEvent.click(getAllByText("Denver")[0]);
      });
      await act(async () => {
        userEvent.click(getByText("Save"));
      });
      await wait();
      getByText("Success!");
    });
  });
});

describe('Integration Testing : Read Component', () => {
  test('renders read component', () => {
    const { debug } = render(<RenderedComponent />);
    act(() => debug());
  });
});

describe('closure form tests', () => {
  const mockUseSelector = jest.spyOn(reactRedux, 'useSelector');
  let spyOnUseDispatch;
  let component;

  beforeEach(() => {
    spyOnUseDispatch = jest.spyOn(reactRedux, 'useDispatch');
    mockUseSelector.mockReturnValue({ exchangeRate: 27 });
    spyOnUseDispatch.mockImplementation(() => jest.fn());

    component = mount(<ClosureForm />);
  });
  afterEach(() => {
    component.unmount();
    spyOnUseDispatch.mockClear();
  });

  it('Should upload image', () => {
    const imageContainer = component.find(ImageUploadContainer);
    const handler = imageContainer.prop('handler');
    handler(files);
    expect(mockSetUpload).toHaveBeenCalledTimes(1);
    expect(mockSetUpload).toHaveBeenCalledWith(files[0]);
  });

  it('Should test FileReader ', () => {
    fileReader.result = 'file content';
    const imageContainer = component.find(ImageUploadContainer);
    const handler = imageContainer.prop('handler');
    handler(files);

    fileReader.onload(target);
    expect(fileReader.readAsDataURL).toHaveBeenCalled();
    expect(fileReader.readAsDataURL).toHaveBeenCalledWith(files[0]);
  });

  it('Should update checkboxes checked value on click', () => {
    const { getByRole } = render(<ClosureForm />);
    act(() => {
      fireEvent.click(getByRole('checkbox'));
    });
    expect(mockSetFieldValue).toHaveBeenCalled();
  });

  it('Should click onsubmit button', () => {
    const event = { preventDefault: () => {} };
    jest.spyOn(event, 'preventDefault');
    component.find('form').simulate('submit', event);
    expect(event.preventDefault).toBeCalled();
  });
});

describe('Modal component', () => {
  const props = {
    language: 1,
    message: 'test',
    isOpen: true,
    onAction: jest.fn()
  };
  beforeEach(() => {
    render(
      <SnackBarContextProvider>
        <Modal {...props} />
      </SnackBarContextProvider>
    );
  });

  it('Should render Modal component', () => {
    expect(screen.queryByText(props.message)).toBeInTheDocument();
    expect(screen.queryByText('common.buttons.confirm')).toBeInTheDocument();
    expect(screen.queryByText('common.buttons.cancel')).toBeInTheDocument();
    expect(screen.queryByText('common.modalHeader')).toBeInTheDocument();
  });

  it('Should call onAction handler with true', () => {
    const confirmButton = screen.queryByText('common.buttons.confirm');

    expect(confirmButton).toBeInTheDocument();
    act(() => {
      fireEvent.click(confirmButton);
    });
    expect(props.onAction).toHaveBeenCalledWith(true);
  });

  it('Should call onAction handler with false', () => {
    const cancelButton = screen.queryByText('common.buttons.cancel');

    expect(cancelButton).toBeInTheDocument();
    act(() => {
      fireEvent.click(cancelButton);
    });
    expect(props.onAction).toHaveBeenCalledWith(false);
  });

  it('Should call onAction handler with false', () => {
    const closeModalIcon = screen.queryByTestId('closeModalIcon');

    expect(closeModalIcon).toBeInTheDocument();
    act(() => {
      fireEvent.click(closeModalIcon);
    });
    expect(props.onAction).toHaveBeenCalledWith(false);
  });
});

describe("the App component", function () {
    describe("when api data is available", function () {
        beforeEach(function () {
            window.fetch.mockResolvedValueOnce({
                json: async () => prodData,
                ok: true,
            });
        });

        test("it displays results as a filtered list of appointment cards", async function () {
            await act(async function () {
                render(<App />);
            });

            expect(await screen.findAllByRole("listitem")).toHaveLength(7);
        });

        test("disabling the filter shows all appointment cards", async function () {
            await act(async function () {
                render(<App />);
            });

            if (screen.queryByText("Filter Locations")) {
                screen.getByText("Filter Locations").click();
            }
            await screen.getByTestId("availability-checkbox").click();
            await screen.getByTestId("apply-filters-button").click();

            expect(await screen.findAllByRole("listitem")).toHaveLength(8);
        });
    });

    describe("when no api data is available", function () {
        beforeEach(function () {
            window.fetch.mockResolvedValueOnce({
                json: async () => noData,
                ok: true,
            });
        });

        test("it displays a no-appointments message", async function () {
            await act(async function () {
                render(<App />);
            });

            expect(await screen.findByRole("status")).toBeInTheDocument();
        });
    });

    describe("when the api endpoint can not be reached", function () {
        beforeEach(function () {
            // Suppress noise from App.js's App().useEffect()'s .catch handler
            console.error = jest.fn();
            console.log = jest.fn();
            window.fetch.mockImplementationOnce(() =>
                Promise.reject(new TypeError("network error"))
            );
        });

        test("it displays an error message", async function () {
            await act(async function () {
                render(<App />);
            });

            expect(screen.getByText("Unexpected Internal Error")).toBeTruthy();
        });
    });
});