how to check function is called or not in react js?

1.7k Views Asked by At

I am trying to test my service which have one function saveWithoutSubmit

export const saveWithoutSubmit = async (
  values,
  orderId,
  taskId,
  fseMsisdn,
  updateTaskListAfterFilter
) => {
  var obj = {
    remarks: values.remarks,
    requestedBy: localStorage.getItem("msisdn")
  };
  try {
    const response = await sendPostRequest(`${API_TASK_URL}closeSr`, {
      ...obj,
      saveWithoutSubmit: true
    });

    if (response && response.data && response.data.status.code !== "200") {
      error(response.data.result.message);
    } else {
      console.log(response);
      success(response.data.status.message);
      updateTaskListAfterFilter();
    }
  } catch (e) {
    if (e.response && e.response.data) {
      console.log(e.response.data.message);
      error(e.response.data.status.message);
    }
  }
};

I want to check success or error method is called or not ? or updateTaskListAfterFilter is called or not?

I tried like this

https://codesandbox.io/s/ecstatic-currying-5q1b8

describe("remark service test", () => {
  const fakeAxios = {
    get: jest.fn(() => Promise.resolve({ data: { greeting: "hello there" } }))
  };
  it("save without sumit", () => {
    const updateTaskListAfterFilter = () => {};
    saveWithoutSubmit({}, updateTaskListAfterFilter);

    expect(updateTaskListAfterFilter).toBeCalled();
  });
});

can you please suggest how i will test async methods or post request (using mook data)??

so that my test cases will be passed. I want to check if I got success from promise my success method will be called else error

any update ?..!!

update

https://codesandbox.io/s/ecstatic-currying-5q1b8

it("save without sumit", async () => {
    const sendPostRequest = jest.fn(() =>
      Promise.resolve({ data: { greeting: "hello there" } })
    );
    const updateTaskListAfterFilter = () => {};
    saveWithoutSubmit({}, updateTaskListAfterFilter);

    expect(updateTaskListAfterFilter).toBeCalled();
  });


it("save without sumit", async () => {
    const sendPostRequest = jest.fn(() =>
      Promise.resolve({ data: { greeting: "hello there" } })
    );

    const mockUpdateTaskListAfterFilter = jest.fn();
    const updateTaskListAfterFilter = () => {};
    saveWithoutSubmit({}, updateTaskListAfterFilter);

    expect(updateTaskListAfterFilter).toBeCalled();

    await wait(() => {
      expect(mockUpdateTaskListAfterFilter).toBeCalled();
    });
  });
1

There are 1 best solutions below

7
On

You should change it("save without sumit", () => { to it("save without sumit", async () => {.

Then you usually use jest.fn() to create a mock function that you will give to another function or component.

Finally, await the mock function to be called:

await wait(() => {
  expect(mockUpdateTaskListAfterFilter).toBeCalled();
});

Alternatively, you can await some other event that you know will occur before your mock is called, like some other mock getting called or something appearing on the page, and then check that your mock was called.