React Testing Library Mock функция не вызывается

Question

Я довольно новичок в тестировании и пытаюсь написать то, что должно быть простым тестом для нашего проекта ...

test('Attempt Login', async () => {
   const submitHandler = jest.fn( ()=> console.log('hello'))

  const { debug, getByText, getByTestId, getByPlaceholderText } = render
    (
    <Router>
        <LoginPage submitHandler={submitHandler} />
    </Router> 
    )

    fireEvent.change(getByPlaceholderText("Enter Username"), {
      target: { value: "admin" }
    });

    fireEvent.change(getByPlaceholderText("Enter Password"), {
      target: { value: "Password" }
    });


    fireEvent.click(getByTestId("login-btn"));

    expect(submitHandler).toHaveBeenCalled()
})

Моя кнопка внутри логина

   <Button data-testid="login-btn" type="submit" variant="contained" color="primary"
   onClick={(event)=>submitHandler(event)}>

тестирование ошибка

expect(jest.fn()).toHaveBeenCalled()

    Expected number of calls: >= 1
    Received number of calls:    0

      45 |     fireEvent.click(getByTestId("login-btn"));
      46 |   
    > 47 |     expect(submitHandler).toHaveBeenCalled()
         |                           ^
      48 | })
      49 | 
      50 | 

Заранее спасибо за любую помощь. Я потратил слишком много времени на это уже -_-

РЕДАКТИРОВАТЬ: попытка проверить результаты нажатия кнопки входа в систему

Вот что я собираюсь попробовать:

mock an Axios call to the login route
await waitForElement getByText('home')
expect getbytext('home')

Я на правильном пути?

Нужно ли импортировать компонент перенаправления страницы и поместить его в маршрутизатор? например компонент для перенаправления на него?

Answer 1

Как вы уже поняли, проблема в том, что вы передаете макет submitHandler в LoginPage, но не используете эту опору.

Чтобы ответить на ваш второй вопрос

Как смоделировать функцию, не переданную в качестве реквизита?

Вот как можно смоделировать функции, импортированные из разных файлов, с помощью Jest:

import { submitForm } from './ajax.js'; // the function to mock
jest.mock('./ajax.js'); // jest mocks everything in that file

it('should call submitForm correctly', async () => {
  submitForm.mockResolvedValue({ loggedIn: true });

  fireEvent.click(getByText('Login'));
  expect(submitForm).toHaveBeenCalled();

  await waitFor(() => expect(getByText('You have logged in successfully').toBeInTheDocument()));
});

---

Полезные ссылки

• Понимание насмешек Jest
• mockResolvedValue