如何模拟 Material UI Slider 上的值变化？

Posted 2023-02-22

【中文标题】如何模拟 Material UI Slider 上的值变化？

【英文标题】：How do I simulate a value change on a Material UI Slider?

【发布时间】：2020-02-04 08:06:57

【问题描述】：

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

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

我的滑块的 onChange 方法直接使用 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"

【问题讨论】：

请添加您的组件代码。

感谢您的留言。我最终弄清楚了，并会编辑我的帖子，以防其他人正在寻找相同问题的答案。

【参考方案1】：

终于弄明白了。我从材料核心导入了滑块（以与我的组件中相同的方式），然后我在我的 wrapper.find 中使用了导入的元素，并使用 target: value: 500 的第二个参数模拟了一个变化。

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

在其他 Material UI 元素上看到了一些类似的指导，但没有意识到滑块会如此相似。将把它留在这里，以防万一其他可怜的人正在互联网上搜索“滑块”相关的信息；）

//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);
  )

【讨论】：

恐怕这可能不是一个合法的解决方案。似乎无论您在 setTimeout 中放入什么，测试都会通过。所以这个应该打开备份。

【参考方案2】：

仅用于一般知识： 设置值并不仅仅与组件（即上下文）交互：

sliderToFind
    .prop("children")[1]
    .props.ownerState.onChangeCommitted(null, YOUR_VALUE);

  sliderToFind.prop("children")[1].props.ownerState.value = YOUR_VALUE;

这是更改值并触发道具 onChangeCommitted（或其他，即 onChange）