Question

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

我尝试了多个不同的选择器，发现大多数在线用户正在导入其Material UI元素，并将导入的项目用作选择器。我已经尝试过使用.as（0）和不使用.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

最终弄清楚了。我从材质核心导入了滑块（使用与组件相同的方式），然后在wrapper.find中使用了导入的元素，并使用第二个参数{target：{value：500}}模拟了更改。 / p>

我以为一开始是行不通的，但是意识到由于我的情况是要更新异步的组件状态，因此我需要添加setTimeout以确保在运行检查之前捕获了更新。 / p>

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

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

如何在Material UI Slider上模拟值更改？

1 个答案: