cypressでE2Eテストを作成していた際に以下のエラーに遭遇しました。
useNavigate() may be used only in the context of a <Router> component.今回はこれの解決方法をご紹介します。
SignIn.cy.tsx
import React from 'react'
import SignIn from '../../src/pages/SignIn'
import { BrowserRouter } from 'react-router-dom'
describe('<SignIn />', () => {
it('renders', () => {
cy.mount(<SignIn />)
cy.get('#email').type('hoge@hoge.com')
cy.get('#password').type('hogehoge')
})
})こちらが問題のプログラムです。
原因はcy.mount()関数内にあります。
useNavigation()関数はBrowserRouterに依存しているため、対象のコンポーネントをBrowserRouterコンポーネントで囲う必要があります。
SignIn.cy.tsx
import React from 'react'
import SignIn from '../../src/pages/SignIn'
import { BrowserRouter } from 'react-router-dom'
describe('<SignIn />', () => {
it('renders', () => {
cy.mount(
<BrowserRouter>
<SignIn />
</BrowserRouter>
)
cy.get('#email').type('hoge@hoge.com')
cy.get('#password').type('hogehoge')
})
})