如何在 NextJS13 中模拟 useRouter 进行 cypress 测试

Question

我有一个表格：

\n

\nconst Form = ({ data }: { data: BuildingAPIResponseData }) => {\n  const dispatch = useDispatch()\n  const { push } = useRouter() // the issue comes from this\n  // other code\n}\n

\n

我的测试：

\n

import { Provider } from "react-redux"\n\nimport { store } from "@/redux/store"\n\nimport Form from "."\nimport MockRouter from "../../../../../../cypress/mocks/next-router"\nimport { BuildingAPIResponseData } from "../../types"\n\ndescribe("Building Details IForm", () => {\n  const zipCode = "63110"\n  const city = "Rodgau"\n  const street = "Liebigstra\xc3\x9fe"\n  const houseNumber = "2"\n\n  const API = `my_api`\n  const apiKey = Cypress.env("api_key")\n\n  const data: BuildingAPIResponseData = {\n    buildingType: "Ein-/Mehrfamilienhaus",\n    familyHome: false,\n    constructionYearClass: "1949",\n    fullStoreys: 2,\n    hasPV: false,\n    livingSpace: 137.0,\n    roofType: "Flat Roof",\n    hasLivingFunction: true,\n  }\n\n  it("should make successful request", () => {\n    cy.request({\n      url: API,\n      headers: {\n        Accept: "application/json",\n        "Ocp-Apim-Subscription-Key": apiKey,\n      },\n    }).then((response) => {\n      expect(response.body[0]).to.have.property("buildingType", data.buildingType)\n      expect(response.body[0]).to.have.property("familyHome", data.familyHome ? "True" : "False")\n      expect(response.body[0]).to.have.property("hasPV", data.hasPV)\n      expect(response.body[0]).to.have.property("fullStoreys", data.fullStoreys)\n      expect(response.body[0]).to.have.property("livingSpace", data.livingSpace)\n      expect(response.body[0]).to.have.property("roofType", data.roofType)\n      expect(response.body[0]).to.have.property("hasLivingFunction", data.hasLivingFunction)\n    })\n  })\n\n  it("should fill the form with the default data", () => {\n    cy.mount(\n      <Provider store={store}>\n      \n          <Form data={data} />\n    \n      </Provider>\n    )\n  })\n})\n\n\n

\n

问题：

\n

\n

我尝试使用cypress.stub()但遇到了同样的错误：

\n

 beforeEach(() => {\n    const pathname = "http://localhost:3000/11127569/energy-check/building-details/summary"\n    const push = cy.stub()\n    cy.stub(NextRouter, "useRouter").returns({ pathname, push })\n  })\n\n

\n

Answer 1

Cypress 文档React Router中有一个示例，它展示了一种通过将测试组件包装在 Router 提供程序中来将 Router 添加到组件测试的简单方法。

import { mount } from 'cypress/react'
import { MemoryRouter } from 'react-router-dom'

Cypress.Commands.add('mount', (component, options = {}) => {
  const { routerProps = { initialEntries: ['/'] }, ...mountOptions } = options

  const wrapped = <MemoryRouter {...routerProps}>{component}</MemoryRouter>

  return mount(wrapped, mountOptions)
})

这是一个React 组件测试。如果您特别想测试 Next，它会编译为服务器 + 客户端，因此您最好通过 e2e 而不是组件进行测试。