Search code examples
reactjsreact-nativejestjsmockingreact-testing-library

Jest - Mock - toHaveBeenCalled() not working as expected?


Not understanding why the Mock function is not showing the tohaveBeenCalled when i am trying to mock in below fashion

//my App.js

import useAuth from "./src/hooks/useAuth";
import useBrunch from "./src/hooks/useBrunch";
import { someFunct } from "./functional";

export default function App() {
  const { funct } = useBrunch();
  return (
    <>
      <Max funct={funct} />
    </>
  );
}

function Max() {
  const LoginSchema = object().shape({
    emailId: string(),
    password: string(),
  });

  const { funct } = useBrunch();
  // const { funct, sas } = useBrunch();
  // const [flag, setFlag] = React.useState(false);
  //const { someFunct } = useAuth();
  return (
    <Formik
      initialValues={{ emailId: "some@gmail.com" }}
      onSubmit={(a, v) => {
        funct(a);
      }}
      validationSchema={LoginSchema}
    >
      {({ handleSubmit, handleBlur, values, dirty, touched, errors }) => {
        return (
          <View style={styles.container}>
            <Text>Open up App.js to start working on your app!</Text>
            <StatusBar testID="someId" style="auto" />
            <CheckBox />
            <TouchableOpacity
              testID="masa"
              disabled={false}
              onPress={handleSubmit}
            >
              <View>
                <Text testID="hello">SOmething</Text>
              </View>
            </TouchableOpacity>
            <Button testID="something" title="someddd" onPress={() => {}} />
          </View>
        );
      }}
    </Formik>
  );
}

export { Max };

//My hooks/useBrunch.js method

const useBrunch = () => {
  console.log("called");
  const funct = (a) => {
    console.log("funct executed");
  };
  return { funct };
};

export default useBrunch;

//My App.test.js file

import React from "react";
import { render, act, waitFor, fireEvent } from "@testing-library/react-native";
import useBrunch from "./src/hooks/useBrunch";
import { Max } from "./App";

jest.mock("./src/hooks/useBrunch", () =>
  jest.fn(() => ({
    funct: jest.fn((a) => {
      console.log(a, "called");
      return a;
    }),
  }))
);

describe("Login something", () => {
  it("first clss", async () => {
    let { getByTestId, toJSON } = render(<Max />);
    const something = getByTestId("masa");
    await waitFor(() => {
      fireEvent.press(something);
    });

    expect(useBrunch().funct).toHaveBeenCalled();
    
  });
});

Expected- on simulation button bres the expected output should have a success i have console inside mock function getting called and also shows paramter, but cannot register that under toHaveBeenCalled() or similiar jest methods

Can anybody helpout here please?!


Solution

  • Try giving something like this:

    const mockFunct = jest.fn((a) => {
      console.log(a, "called");
      return a;
    })
    jest.mock("./src/hooks/useBrunch", () =>
      jest.fn(() => ({
        funct: mockFunct
      })
    ));
    

    and then

     expect(mockFunct).toHaveBeenCalled();