使用React Testing庫在React中聲明表單提交的道具調用

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首先出現。 這就是為什么根本不調用模擬的原因。

您可以添加其他容器來隔離測試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 })