React Testing, using axios-mock-adapter

Question

I need to switch out my backend in-memory DB for testing due to memory issues. Below is my code

import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import App from "App";
import axios from "axios";
import MockAdapter from "axios-mock-adapter";
import { AccessLevel, ResponseApi, SystemUserApi } from "types";
let mock: MockAdapter;
beforeAll(() => {
  mock = new MockAdapter(axios);
});
afterEach(() => {
  mock.reset();
});
beforeEach(() => {
  jest.resetModules();     
});

describe("<App />", () => {
  test("login", async () => {
      mock.onPost('/Hello').reply(200, getPost);
      const result = render(<App />);    
      const user = userEvent.setup();
      const btnLogin = screen.getByText(/Login/i) as HTMLButtonElement;
      await userEvent.click(btnLogin);
   
      let btnOk = screen.queryByText(/OK/i) as HTMLButtonElement;
      expect(btnOk.disabled).toBe(true);

      let btnCancel = screen.getByText(/Cancel/i) as HTMLButtonElement;
      expect(btnCancel.disabled).toBe(false);

      fireEvent.change(screen.getByLabelText(/Access Code/i) as HTMLInputElement, { target: { value: 'USER' } });
      expect(btnOk.disabled).toBe(false);

      await userEvent.click(btnOk);

      //At this point I was expecting the onPost to be clicked
    });
});
function getPost(config: any): any {
  console.log(config);
  debugger;
  return {
    data:  {
      access_code: 'USER'.toUpperCase(),
      access_level: AccessLevel.USER ,
      lock_level:true
    } as SystemUserApi,
    error: false,
  } as ResponseApi
}

Deep down in the is a call axios post to /Hello but my function within the test is not called. I do not know if it has to do with the actual call being axios.request vs axios.post. I have tried switching to mock.onAny, but that did not seem to work. Not sure what to do here.

React Testing, using axios-mock-adapter

0 Answers0