Javascript 在React测试库中的Ant Design滑块上触发onChange函数不工作

我在Ant设计滑块上做了一个包装。看起来像这样

import React, { useState } from 'react';
import { Slider as AntSlider } from 'antd';

export function Slider(props) {
  const { value, onChangeFunction } = props;

  const [currentValue, changeValue] = useState(value);

  const onChange = (newValue) => {
    onChangeFunction();
    changeValue(newValue);
  }

  return (
    <AntSlider
      value={currentValue}
      onChange={onChange}
    />
  )

}

import React，{useState}来自“React”；
从“antd”导入{Slider as AntSlider}；
导出功能滑块（道具）{
const{value，onChangeFunction}=props；
常量[currentValue，changeValue]=使用状态（值）；
const onChange=（newValue）=>{
onChangeFunction（）；
变更价值（newValue）；
}
返回(
)
}

非常简单。唯一需要注意的是有一个onChange函数。 我现在正试图用React测试库测试这个组件。下面是我的测试示例

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

describe('Basic Test', () => {
  it('Should change', () => {
    const change = jest.fn();
    const wrapper = render(
      <Slider value={30} onChangeFunction={change} />
    )

    const slider = wrapper.getByRole('slider').parent;
    fireEvent.change(slider, 35);
    expect(change).toHaveBeenCalledTimes(1);
  })
})

从“React”导入React；
从'@testing library/react'导入{render，firevent}；
描述（'基本测试'，（）=>{
它（'应该改变'，（）=>{
const change=jest.fn（）；
常量包装器=渲染(
)
const slider=wrapper.getByRole（'slider'）.parent；
fireEvent.change（滑块，35）；
期望（改变）。被催促的时间（1）；
})
})

我希望调用了

change

函数，但这始终失败。好像我用错误的方式调用了

change

函数。我做这个测试有什么不对吗

---

有什么办法可以让考试顺利进行吗？我知道人们说模拟组件更好，但我真正的组件中有更复杂的逻辑，我更希望能够判断onChange函数是否真的被调用，而不是在测试文件中创建模拟组件。

你解决了吗？我也有同样的问题。如果你能分享就太好了：）不幸的是，我没有。我认为正确的解决方案是使用这些类型的组件，而不是React测试库，这确实不是最优的。原因是酶可以让你基于道具进行测试，所以你可以通过这种方式触发一个

onChange

函数。我已经在React Testing Library中编写了一系列测试，所以我并没有完全改用酶，但我认为在这些情况下改用酶是有意义的。