I have several unit tests that test form validation for my login screen.
Example:
test("Invalid email renders error", async () => {
render(<LoginForm />);
// Arrange
const emailElement = screen.getByTestId("email");
const passwordElement = screen.getByTestId("password");
const submit = screen.getByTestId("login-button");
// Act
await user.type(emailElement, "invalid");
await user.type(passwordElement, "1234567890");
fireEvent.click(submit);
// Assert
await waitFor(() => {
expect(screen.getByText("Invalid email format")).toBeInTheDocument();
});
});
But when I add this Link it fails:
<p>
Don't have an account? <Link to="/Register">Register here</Link>
</p>
Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. 88 | test("Button was called with form values", async () => { 89 | const consoleSpy = jest.spyOn(console, "log"); > 90 | render(<LoginForm />); | ^ 91 | //Arrange 92 | const emailElement = screen.getByTestId("email"); 93 | const passwordElement = screen.getByTestId("password");
Any idea why the link text is causing this failure?
Here are the routes
function App() {
return (
<Routes>
<Route path='/' element={<LoginForm />} />
<Route path='Register' element={<RegisterForm />} />
</Routes>
);
}