reactjs 在nextjs中测试时无法读取路由器

pqwbnv8z  于 2023-03-08  发布在  React
关注(0)|答案(1)|浏览(175)

嗨,我想做的是测试,当按钮被按下时,它重定向到"/"。通常它工作,但当我尝试测试它失败,给我这个:

Cannot read properties of null (reading 'push')

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

这是我的测试代码:

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

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

这是一个组件:

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

我相当新的React和测试的React一般,所以任何帮助将是伟大的。提前感谢

62lalag4

62lalag41#

您可能需要模拟路由器,因为它在服务器上下文中不可用。
考虑尝试“next-router-mock”

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

然后,在测试中,您将能够以下列方式使用它:

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

// Act

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

相关问题