I have a component with a react mui slider:
const getVolumeIcon = volume => {
if (!volume || volume === '0') {
return <VolumeOffIcon style=/>;
}
if (volume < 50) {
return <VolumeDownIcon style=/>;
}
return <VolumeUpIcon style=/>;
};
class VolumeSlider extends React.Component {
state = {
open: false
};
handleClick() {
this.setState({open: !this.state.open});
};
handleChange(event, newValue) {
this.props.onVolumeChange(newValue);
};
render() {
const {classes, volume} = this.props;
return (
<div className={classes.wrapper}>
<strong>Volum:</strong>
<IconButton aria-label="volume" onClick={() => this.handleClick()}>
{getVolumeIcon(volume)}
</IconButton>
<div className={classes.sliderPlaceholder}>
{this.state.open &&
<ClickAwayListener onClickAway={() => this.setState({open: false})}>
<Slider classes= value={volume}
onChange={(event, newValue) => this.handleChange(event, newValue)}
aria-labelledby="continuous-slider"/>
</ClickAwayListener>
}
</div>
</div>
);
}
}
export default withStyles(styles)(VolumeSlider);
I have started writing tests for this component:
import React from 'react';
import ReactTestRenderer from 'react-test-renderer';
import VolumeSlider from "./VolumeSlider";
import IconButton from "@material-ui/core/IconButton";
describe('VolumeSlider', () => {
let testRenderer;
afterEach(() => {
testRenderer.unmount();
});
it('opens volume slider on clicking icon button', () => {
testRenderer = ReactTestRenderer.create(<VolumeSlider volume={0} onVolumeChange={jest.fn()}/>);
const volumeSlider = testRenderer.root.findByType(VolumeSlider.Naked);
expect(volumeSlider.instance.state.open).toBeFalsy();
const iconButton = volumeSlider.findByType(IconButton);
iconButton.props.onClick();
expect(volumeSlider.instance.state.open).toBeTruthy();
});
});
But, I get an error when I run this test:
console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
Error: Uncaught [TypeError: Cannot read property 'addEventListener' of null]
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10141
The above error occurred in the <ForwardRef(Slider)> component:
in ForwardRef(Slider) (created by WithStyles(ForwardRef(Slider)))
in WithStyles(ForwardRef(Slider)) (at VolumeSlider.js:73)
in ForwardRef(ClickAwayListener) (at VolumeSlider.js:72)
in div (at VolumeSlider.js:70)
in div (at VolumeSlider.js:65)
in VolumeSlider (created by WithStyles(VolumeSlider))
in WithStyles(VolumeSlider) (at VolumeSlider.test.js:14)
Aucun commentaire:
Enregistrer un commentaire