Cant read router when testing in nextjs

Hi what I am trying to do is test when button is pressed it redirects to '/'. Regulary it works but when I try to test it it fails giving me this:

Cannot read properties of null (reading 'push')

      71 |                         className={styles.footerButton}
      72 |                         data-testid="footerButton"
    > 73 |                         onClick={() => router.push('/')}
         |     

This is my test code:

const buttonElement = screen.getByTestId('footerButton');
      expect(buttonElement).toBeInTheDocument();
      userEvent.click(buttonElement);

      expect(window.location.href).toBe('http://localhost/');
                                      ^

This is the component:

<button
                        className={styles.footerButtonPC}
                        data-testid="footerButtonPC"
                        onClick={() => router.push('/')}
                      >
                        Full Fit & Size Guide
                      </button>

Im fairly new to react and testing in react in general so any help would be great. Thanks in advance

Probably, what you want is to mock the router, because it's not available in the server context.

Consider trying "next-router-mock"

import mockRouter from "next-router-mock";
jest.mock("next/router", () => require("next-router-mock"));

Then, in tests, you'll be able to use it in the following ways:

mockRouter.push("/your-initial-url"); // Optionally
mockRouter.push = jest.fn(); 

// Act

expect(mockRouter.push).toHaveBeenCalledWith("http://localhost/");