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

Question

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();
    });
  });

Have you seen the Jest [Testing Asynchronous Code](https://jestjs.io/docs/en/asynchronous) docs yet? It explains how to use [.then](https://jestjs.io/docs/en/asynchronous#promises) or better yet [async/await](https://jestjs.io/docs/en/asynchronous#asyncawait) in tests. — David784, Feb 15 '20 at 16:04
Does this answer your question? [Jest mock async calls inside react component](https://stackoverflow.com/questions/42638889/jest-mock-async-calls-inside-react-component) — frodo2975, Feb 15 '20 at 21:53
@frodo2975 no i am only testing a function which have one http call — user944513, Feb 15 '20 at 21:54

score 0 · Answer 1 · answered Feb 15 '20 at 21:49

0

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.

answered Feb 15 '20 at 21:49

C-RAD

1,052
9
18

How about you update it with what I told you and if it still doesn't work, update your question and I will try to help you again. – C-RAD Feb 15 '20 at 21:57
Can you paste the full error? It looks like you're not giving `saveWithoutSubmit()` your mock functions. – C-RAD Feb 15 '20 at 22:13
`Could not find dependency: 'axios' relative to '/src/remark.service.js' DependencyNotFoundError: Could not find dependency: 'axios' relative to '/src/remark.service.js' at n ` – user944513 Feb 15 '20 at 22:17
https://codesandbox.io/s/ecstatic-currying-5q1b8 see i am passing – user944513 Feb 15 '20 at 22:18
any idea ? why it is happening – user944513 Feb 15 '20 at 22:28
That error means although you are requiring axios, it is not installed on your app. You should `npm install axios` so it gets added to `package.json` and `node_modules/`. But you shouldn't have to use axios at all. You are still not passing your mock of the post request to `saveWithoutSubmit()`. If that is not possible with your current code you may want to consider refactoring so it is. – C-RAD Feb 15 '20 at 22:37
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/207902/discussion-between-user944513-and-c-rad). – user944513 Feb 15 '20 at 22:39

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

1 Answers1