I get a warning from React Warning: An update to MySlider inside a test was not wrapped in act(...). that has no side effect at all.
My component wraps Slider from material UI and provides a handler for onChange props. Within the hanlder, there is only setState being called. I wonder if there is some asynchronous calls within the implementation of Slider component and how should I fully simulate the interaction.
Here is a minimum executable snippet to reproduce the issue
import { mount } from 'enzyme';
import Slider from '@material-ui/core/Slider';
import React, { useContext, useState } from "react";
const sliderContext = React.createContext(null);
const MySlider = () => {
const [value, setValue] = useState(0);
const sliderController = useContext(sliderContext);
const handleChange = (event, newValue) => {
setValue(newValue);
sliderController.callback(newValue);
};
return (
<Slider
min={0}
max={1}
step={0.01}
value={value}
onChange={handleChange}
aria-labelledby="continuous-slider">
</Slider>);
}
describe('custom slider', () => {
const mockSliderController = {
callback: jest.fn()
};
const mountSlider = ()=>{
return mount(
<sliderContext.Provider value={mockSliderController}>
<MySlider />
</sliderContext.Provider>)
};
it('should trigger the event when the value of the slider changed', () => {
const component = mountSlider();
const toggleValue = 0.5;
component.find(Slider).props().onChange({}, toggleValue);
expect(mockSliderController.callback).toHaveBeenCalledTimes(1);
expect(mockSliderController.callback).toHaveBeenCalledWith(toggleValue);
})
})