尝试教自己测试React测试库和笑话，因为这是我的工作使用。对于我的生活，我不能弄清楚为什么模拟函数testClick没有被调用。我研究了文章和观看视频，但大多数似乎过时了，因为它似乎测试世界改变代码应该如何写超快。有人有想法吗？以下是代码：
Products.js组件：

import React, { useState } from 'react';
import { fetchProducts } from '../service';

const Products = () => {
  const [product, setProduct] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    fetchProducts();
  };

  const hasBeenClicked = () => {
    console.log('clicked!');
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        <input
          type="text"
          value={product}
          onChange={(e) => setProduct(e.target.value)}
        />
      </label>
      <input
        type="submit"
        onClick={hasBeenClicked}
        data-testid="button"
        label="Search"
      />
    </form>
  );
};

export default Products;

产品测试. js：

import React from 'react';
import { render, screen, cleanup, fireEvent } from '@testing-library/react';
import Products from './Products';

test('Button click triggers click event', () => {
  const testClick = jest.fn();
  const { getByTestId } = render(<Products click={testClick} />);
  const button = getByTestId('button');
  fireEvent.click(button);

  expect(testClick).toBeCalled();
});

结果：

PASS  src/App.test.js
 FAIL  src/components/Products.test.js
  ● Console

    console.log
      clicked!

      at apply (src/components/Products.js:13:13)

  ● Button clicks triggers click event

    expect(jest.fn()).toBeCalled()

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

      11 |   fireEvent.click(button);
      12 |
    > 13 |   expect(testClick).toBeCalled();
         |                     ^
      14 | });
      15 |

      at Object.<anonymous> (src/components/Products.test.js:13:21)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        3.18 s, estimated 4 s