mocksubmit.js

import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { SignUpForm } from "./SignUpForm";
import { Provider } from "react-redux";
import { createStore } from "redux";
import { MemoryRouter } from "react-router";
import { reducer } from "../redux/reducer";

const initialValues = {
  email: "",
  name: "",
  password: "",
  location: "",
};

const mockedOnSubmit = jest.fn();

jest.mock("./hooks/useOnSubmit.js", () => ({
  useOnSubmit: () => ({ onSubmit: mockedOnSubmit }),
}));

const StepOne = () => {
  const store = createStore(reducer, initialValues);
  return (
    <MemoryRouter initialEntries={["/"]}>
      <Provider store={store}>
        <SignUpForm />
      </Provider>
    </MemoryRouter>
  );
};

describe("components/SignUpForm", () => {
  test("StepOne Data Submission", async () => {
    render(<StepOne />);
    const name = "john doe";
    const email = "john@example.com";
    const password = "test123";
    const location = "6889 beverly drive";
    userEvent.type(screen.getByLabelText(/email/i), email);
    userEvent.type(screen.getByLabelText(/name/i), name);
    userEvent.type(screen.getByLabelText(/password/i), password);
    userEvent.click(screen.getByText(/next/i));
    await waitFor(() => {
      expect(mockedOnSubmit).toHaveBeenCalled();
    });
    screen.debug();
    // userEvent.type(screen.getByLabelText(/location/i), location);
    // expect(mockedOnSubmit.mock.calls[0][0]).toEqual({
    //   email,
    //   name,
    //   password,
    //   location,
    // });
  });
});