Query a simple button with jest and-CodePudding

I'm trying to test my component, so here it's :

import React from 'react';
import { useNavigate } from 'react-router-dom';

import '../styles/mainPageStyles.css';

const MainPage = (): React.ReactElement => {
  const navigate = useNavigate();

  const handleBeginQuiz = () => {
    navigate('/quiz');
  };

  return (
    <div className="mainPageContainer">
      <div className="mainpageWrapper">
        <h2 className="defaultFontSize">Welcome to the Trivia Challenge!</h2>
        <p className="defaultFontSize">
          You will be presented with 10 True or False questions.
        </p>
        <p className="defaultFontSize">Can you score 100%?</p>
        <button
          className="beginButton defaultFontSize"
          onClick={handleBeginQuiz}
          aria-label="BEGIN"
        >
          BEGIN
        </button>
      </div>
    </div>
  );
};

export default MainPage;

as you see it has only one functionality, to redirect me to another page, I ended to test on click event on the button it self, It seems like I can't select it, I always get this error:

Main Page Tests › On Begin Button Click

    TestingLibraryElementError: Unable to find an element with the text: BEGIN. This could be because the 
text is broken up by multiple elements. In this case, you can provide a function for your text matcher to 
make your matcher more flexible.

and here are my attempts:


test('On Begin Button Click', () => {
    const history = createMemoryHistory();
    render(
      <MemoryRouter initialEntries={[`/`]}>
        <Routes>
          <Route element={<MainPage />} />
        </Routes>
      </MemoryRouter>
    );
    // I have also tried getByText

    const buttonElement = screen.getAllByText('BEGIN', { selector: 'button' });
    // fireEvent.click(buttonElement);
    // expect(history.location.pathname).toBe('/quiz');
  });

CodePudding user response：

try using findByText instead of getByText