One thing you will do in every end-to-end test—and do quite often—is navigating between pages. As such, it would be great if you could catch mistakes in navigation before you run your tests.

For example, when making a typo in the page's URL:

await page.goto('/hoempage')

While this certainly will fail your test, the error you'll get will be a result of the mistake (navigation timeout, failed to find elements, timing out assertions), not the mistake itself.

We can do better here. We can make such mistakes produce a type error, notifying us way before we run the tests. We can have type-safe routing in our tests!

👨‍💼 To achieve type-safe routing, you are going to implement a custom fixture called navigate. The purpose of this fixture is to infer the route types from React Router and, as a result, make every page navigation in your tests type-safe.

🐨 Start by opening the file I've created for you. Follow the steps in that file to implement the navigate fixture.

🐨 Once the fixture is ready, refactor the test suite to use the newly created navigate() fixture.

And, of course, verify that the tests are passing in the end by running npm test:e2e. Good luck!