lundi 21 septembre 2020

Testing component with react mui slider gives Error: Uncaught [TypeError: Cannot read property 'addEventListener' of null]

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