Блог

Я пытался вызвать событие щелчка, которое в моем навигационном компоненте я проверил, что кнопка срабатывает, но меня не перенаправляют на другую страницу. Вместо этого мой терминал отправляет мне снимок компонента, который я тестирую, и не может найти текст для входа в тег h1. Также вместо этого попытался запустить ссылку, предоставив ей data-testid, который также не сработал и вернул мне те же результаты.

Пожалуйста, любые рекомендации, заранее спасибо.

тест

 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();
    })
})

  

Компонент, который я тестирую

 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;
  

Пытаюсь перенаправить на этот компонент для доступа к h1

 function LoginForm() {

  return (
    <div className="login">
        <h1 className="entryheader__header">Login</h1>
    </div>
  )
export default LoginForm;