Подтверждение запроса на подачу формы в React с использованием библиотеки React Testing

Question

Вы можете воспроизвести проблему в следующих кодах и в поле:

В качестве примера я создал компонент, который использует следующий код для получения случайного изображения при каждом нажатии кнопки формы:

import { Button } from "antd";
...
class ContinuousMemeDeliveryApi extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  static defaultProps = { getImage };
  state = { image: images[0], random: 0 };

  handleClick = async e => {
    e.preventDefault();
    const { data } = await this.props.getImage();
    this.setState({ image: data.image, random: data.random });
  };
  ...
  render() {
    return (
      <form onSubmit={this.handleClick}>
        <Button htmlType="submit">Click Me</Button>
        ...
      </form>
    );
  }

Это работает, как и ожидалось, и я сделал следующий код для проверки реализации:

test("loads random memes on click", async () => {
  const mockGetImage = jest.fn(() =>
    Promise.resolve({ data: { image: "testImage.jpg" } })
  );
  const { getByText } = render(
    <ContinuousMemeDeliveryApi getImage={mockGetImage} />
  );

  const clickMeButton = getByText(/click/i);

  fireEvent.click(clickMeButton);
  // @TODO: fix assertion
  expect(mockGetImage).toHaveBeenCalledTimes(1);
});

Однако проверка завершается неудачно со следующим сообщением об ошибке:

expect(jest.fn()).toHaveBeenCalledTimes(1)

Expected mock function to have been called one time, but it was called zero times.

Есть идеи, почему это не удается?

Answer 1

Поскольку у вас есть 2 рендеринга реагирующих корней в одном документе (ваше приложение и тесты), вы не можете использовать значение по умолчанию document.body в качестве базового элемента для библиотеки реагирующего тестирования.

При текущем подходе ваши запросы фактически находят элементы в вашем приложении, а не в визуализированном тесте, потому что они связаны с baseElement = document.body, а ваш div#container стоит первым.Вот почему mock вообще не вызывается.

Вы можете добавить дополнительный контейнер для изоляции тестового дерева DOM

// index.html
<div id="test-container"></div>

Теперь вы можете указать контейнер при рендеринге теста

import { render as rtlRender, fireEvent, wait } from "react-testing-library";

// get the container
const container = document.getElementById('test-container')

// override render to provide custom container
const render = (ui, options = {}) => rtlRender(ui, { container, ...options })