I have been trying to call a click event that in my Navigation component, I checked that the button is firing but i am not being redirected to another page. Instead my terminal is sending me a snapshot of the component i am testing and not being able to find the login text in h1 tag. Also tried to fire the link instead by giving it a data-testid which also didnt work and gave me back the same results.
Please any guidance, thanks in advance.
test
import * as React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
import '@testing-library/jest-dom';
import Navigation from './Navigation';
describe('Navigation Content', () => {
test('clicking login button', () => {
const props = jest.fn();
const { getByTestId, getByText } = render (
<Navigation popUpHandler={props}/>, { wrapper: BrowserRouter }
);
const loginBtn = getByText('LOGIN');
fireEvent.click(loginBtn);
expect(getByText('Login')).not.toBeNull();
expect(getByText('Login')).toBeInTheDocument();
})
})
Component i am testing
function Navigation(props) {
const { popUpHandler } = props;
return (
<nav className="header__nav">
<Link data-testid="login-btn" to="/login">
<button type="button" className="header__login" onClick={() => {console.log('click')}}>LOGIN</button>
</Link>
<Link to="/register">
<button type="button" className="header__register">SIGN UP</button>
</Link>
<Link to="/about-me">
<button type="button" className="header__aboutme">ABOUT ME</button>
</Link>
<button type="button" data-testid="close-nav-btn" className="close__nav" onClick {popUpHandler}></button>
</nav>
);
}
Navigation.propTypes = {
popUpHandler: Proptypes.func.isRequired,
};
export default Navigation;
Trying to redirect to this component to access the h1
function LoginForm() {
return (
<div className="login">
<h1 className="entryheader__header">Login</h1>
</div>
)
export default LoginForm;
Aucun commentaire:
Enregistrer un commentaire