Блог

Я пытаюсь проверить, перенаправляет ли меня нажатие на ссылку на другую страницу, ожидая после щелчка найти тег h1 с другой страницы (Register.jsx). Но это не работает, что я делаю не так и как я могу проверить, чтобы найти, где я делаю неправильно?

 *Footer.jsx*

...
             <div>
                  <Link to="/register" className="btn-secondary" id="register">
                    Register
                  </Link>
            </div>
...
 

 *Footer.test.jsx*

/* eslint-disable no-dupe-keys */
/* eslint-disable no-undef */

import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Footer from './Footer';

describe('Footer', () => {
  test('Render Footer Component', () => {
    render(
      <MemoryRouter>
        <Footer />
      </MemoryRouter>,
    );

    const link = screen.getByRole('link', { name: /register/i });
    userEvent.click(link);

    expect(
      screen.getByRole('heading', {
        name: /i am register page/i,
      }),
    ).toBeInTheDocument();
  });
});
 

 *Error I'm getting*

TestingLibraryElementError: Unable to find an accessible element with the role "heading" and name `/i am register page/i`

Here are the accessible roles:

      contentinfo:(And it shows me roles of the Footer.jsx page, not the Register.jsx page)