如何在材质 UI 滑块上模拟值更改?

Question

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

我尝试了多个不同的选择器，发现大多数在线用户都在导入他们的材质 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"

Answer 1

最终弄清楚了。 我从材料核心导入滑块(与在我的组件中的方式相同(，然后在我的包装器中找到导入的元素，并使用第二个参数 { target： { value： 500 }} 模拟更改。

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

在其他材质 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);
})

Answer 2

仅供一般知识使用： 要设置值并不仅与组件(即上下文(交互，请执行以下操作：

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

这是更改值并在ChangeSubmitd(或其他即onChange(上触发prop