mercredi 18 novembre 2020

fireEvent.Click is not directing me to another page

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