Reactjs 如何模拟材质UI滑块上的值更改？

我正试图通过React Hooks（useState）通过模拟材质UI滑块上的更改值来测试状态更改，因为这会调用我的Hooks状态更新函数。然后，我试图通过检查页面上显示的文本来验证更改。我觉得我已经接近了，不再有语法错误对我大喊大叫，但似乎改变没有发生

我尝试了多种不同的选择器，发现大多数在线用户都在导入他们的Material UI元素，并使用导入的项作为选择器。我尝试了使用和不使用.as（0）的方法，使用值500作为字符串和数字，以及其他变体

我的slider的onChange方法直接调用我的hooks state update方法，并将e.target.value设置为新的状态值（这在实际的应用程序中都可以正常工作）

还有其他我可以试试的吗？或者也许有另一种更好的方法来测试使用React钩子改变状态

import ReactDOM from 'react-dom';
import App from './App';
import { createMount } from '@material-ui/core/test-utils';
import Slider from "@material-ui/core/Slider";

describe('App', () => {
  let mount;

  beforeEach(() => {
    mount = createMount();
  });

  afterEach(() => {
    mount.cleanUp();
  });


  it('updates the volts displayed when the slider value changes', () => {
    const wrapper = mount(<App />);
    wrapper.find(Slider).at(0).simulate('change', { target: { value: 500 } });
    expect(wrapper.find('.volts-screen').text()).toEqual('0.500');
  })

}```



ERROR


expect(received).toEqual(expected) // deep equality

    Expected: "0.500"
    Received: "0.000"

从“react dom”导入ReactDOM；
从“./App”导入应用程序；
从'@material ui/core/test utils'导入{createMount}；
从“@material ui/core/Slider”导入滑块；
描述（'App'，（）=>{
让我们登上；
在每个之前（（）=>{
mount=createMount（）；
});
之后（（）=>{
mount.cleanUp（）；
});
它（'当滑块值改变时更新显示的电压'，（）=>{
const wrapper=mount（）；
find（Slider）.at（0）.simulate（'change'，{target:{value:500}}）；
expect（wrapper.find（'.volts screen'）.text（））.toEqual（'0.500'）；
})
}```
错误
expect（received）.toEqual（expected）//深度相等
预期：“0.500”
收到：“0.000”

最终解决了这个问题。我从material core导入了滑块（与我的组件中的方式相同），然后在包装器中使用导入的元素。查找并使用第二个参数{target:{value:500}模拟了一个更改

起初我认为这不起作用，但意识到，因为在我的情况下，效果是更新异步的组件状态，所以我需要添加一个setTimeout，以确保在运行检查之前捕获更新

在其他材质UI元素上看到了一些类似的指导，但没有意识到滑块会如此相似。请将此留在此处，以防其他可怜的灵魂在互联网上搜索“滑块”——尤其是与滑块相关的信息；）

//导入的元素如下所示
从“@material ui/core/Slider”导入滑块；
//在使用该元素的包装器中找到，并在超时时使用目标值模拟更改
它（'当滑块值改变时更新显示的电压'，（）=>{
const wrapper=mount（）；
find（Slider）.at（0）.simulate（'change'，{target:{value:500}}）；
setTimeout（（）=>expect（wrapper.find（'.volts screen'）.text（））.toEqual（'0.500'），0）；
})

请添加组件的代码。感谢您的留言。我最终找到了答案，并将编辑我的帖子，以防其他人也在寻找同样的答案。我担心这可能不是一个合法的解决方案。似乎无论您在setTimeout中添加了什么，测试都会通过。所以这应该被重新打开。

//imported the element as below
import Slider from "@material-ui/core/Slider";

// found in wrapper using that element and simulated change with target value on timeout
it('updates the volts displayed when the slider value changes', () => {
    const wrapper = mount(<App />);
    wrapper.find(Slider).at(0).simulate('change', { target: { value: 500 } });
    setTimeout(() => expect(wrapper.find('.volts-screen').text()).toEqual('0.500'), 0);
  })