Got act() warning from testing my custom Slider that has no side effect

Viewed 68

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);
    })
})
0 Answers
Related