尽管将 jest.fn 作为道具传递，但未调用模拟函数

Question

我正在尝试测试此组件的 select 功能，我正在使用

https://www.npmjs.com/package/react-giphy-searchbox

我是这样用的

GifSection.tsx

import React, { Fragment } from "react";
import ReactGiphySearchbox from "react-giphy-searchbox";
import "./style.css";
type GifType = {
  apiKey: string;
  select: (e: any) => void;
};
const GifSection: React.FC<GifType> = (props) => {
  const { apiKey, select } = props;
  return (
    <div data-testid="gif-section">
      <ReactGiphySearchbox
        data-testid="search-box"
        wrapperClassName="gifForm"
        searchFormClassName={{ padding: "20px 0px" }}
        apiKey={apiKey}
        onSelect={(e) => select(e)}
        masonryConfig={[
          { columns: 4, imageWidth: 110, gutter: 5 },
          { mq: "1000px", columns: 4, imageWidth: 120, gutter: 5 },
        ]}
      />
    </div>
  );
};
export default GifSection;

GifSection.test.tsx

it("should test onSelect", () => {
    const mockSelect = jest.fn();
    render(
      <GifSection
        apiKey="****************"
        select={mockSelect}
      />
    );
    expect(mockSelect).toBeCalledTimes(1);
});

我得到

expect(jest.fn()).toBeCalledTimes(expected)
Expected number of calls: 1
Received number of calls: 0

我不确定为什么会这样，会不会是第 3 方插件本身？

为了在深入挖掘第 3 方组件本身时获得更好的上下文

  // screen.debug(screen.getByTestId("SearchFormInput"));
  // console.log
  // <input
  //   class="input"
  //   data-testid="SearchFormInput"
  //   name="search"
  //   placeholder="Search for GIFs"
  //   type="text"
  //   value=""
  // />

Answer 1

onSelect={(e) => select(e)} 在更改事件被触发之前不会被触发。您应该从测试文件中触发一个 screen.click 事件。

API具体

正在查找 react-giphy-searchbox、onSelect 的文档：需要一个回调，只要 selected 就会触发该回调。它 returns 一个 Gif 对象，其格式为 Giphy API 的图像指定格式。因此，只需单击（正如我所建议的那样）。

您应该使用 screen.debug 查看正在生成什么 html 并尝试 select 那样的东西，但老实说，您不应该调用 API测试时。你基本上是在测试 GIPHY 服务，这不是你的工作，或者 React 中的道具系统在测试时也不是你的工作。

尽管将 jest.fn 作为道具传递，但未调用模拟函数

mock function is not being called despite passing jest.fn as a prop

reactjs

react-testing-library