React Jest: Expected number of calls: >= 1 Received number of calls: 0

Question

I am developing a React Native application. but it gives a error as below in the console:

 FAIL  src/features/dashboard/components/jest-tests/ExpandedInstanceSchedule.test.js (20.428 s)
      ExpandedInstanceSchedule Component
        √ update on event (357 ms)
        √ renders corectly (138 ms)
        × renders corectly (210 ms)
    
      ● ExpandedInstanceSchedule Component › renders corectly
    
        expect(jest.fn()).toHaveBeenCalledTimes(expected)
    
        Expected number of calls: 1
        Received number of calls: 0
    
          78 |     fireEvent.click(button)
          79 |     // console.log(button)
        > 80 |     expect(UpadteInstances).toHaveBeenCalledTimes(1);
             |                             ^
          81 | //    expect(UpadteInstances.mock.calls[1][0]).toBe(1);
          82 |   });
          83 | });
    
          at Object.<anonymous> (src/features/dashboard/components/jest-tests/ExpandedInstanceSchedule.test.js:80:29)
    
    Test Suites: 1 failed, 1 total
    Tests:       1 failed, 2 passed, 3 total
    Snapshots:   0 total
    Time:        24.147 s
    Ran all test suites matching /ExpandedInstanceSchedule/i.
    
    Watch Usage: Press w to show more.

Test file:

import { render} from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import ExpandedInstanceSchedule, {
  UpadteInstances,
} from "../ExpandedInstanceShedule";
import { startTimeHandle } from "../ExpandedInstanceShedule";
import { configure, mount } from "enzyme";
import React from "react";
import { shallow } from "enzyme";
import { Provider } from "react-redux";
import configureMockStore from "redux-mock-store";
import thunk from "redux-thunk";
import Adapter from "enzyme-adapter-react-16";
import { fireEvent } from "@testing-library/react";

configure({ adapter: new Adapter() });
const mockStore = configureMockStore([thunk]);
describe("ExpandedInstanceSchedule Component", () => {
  const store = mockStore({});

  const instanceSchedule = {
    id: "100",
    repeat_every: "Every Weekday",
    occurance: "Standard-E4s v3",
    repeat_on: "Every Weekday",
    date: "2002-02-21",
    start_time: "2018-07-03T15:39:47.000+0530",
    end_time: "2018-07-03T15:39:47.000+0530",
    Repeat: "Every Weekday",
  };

  it("shoud call the onclick function", () => {
    const UpadteInstances = jest.fn();

    const { getByText } = render(
      <Provider store={store}>
        <ExpandedInstanceSchedule
          onClick={UpadteInstances}
          instanceSchedule={instanceSchedule}
        />
      </Provider>
    );

    const button = getByText("Save Changes");
    fireEvent.click(button);
    expect(UpadteInstances).toHaveBeenCalledTimes(1);
  });
});

Answer 1

You need to find the component first and then I would suggest using onProps instead of click. Try this...

const wrapper = render(
  <Provider store={store}>
    <ExpandedInstanceSchedule
      onClick={UpadteInstances}
      instanceSchedule={instanceSchedule}
    />
  </Provider>
);

wrapper.find('ExpandedInstanceSchedule').prop('onClick')