使用react mui滑块测试组件会给出错误：未捕获[TypeError：无法读取null的属性'addEventListener']

问题描述

我有一个带有react mui slider的组件：

const getVolumeIcon = volume => {
  if (!volume || volume === '0') {
    return <VolumeOffIcon style={{ color: 'white' }}/>;
  }
  if (volume < 50) {
    return <VolumeDownIcon style={{ color: 'white' }}/>;
  }
  return <VolumeUpIcon style={{ color: 'white' }}/>;
};

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={{root: classes.slider,thumb: classes.thumb}} value={volume}
                    onChange={(event,newValue) => this.handleChange(event,newValue)}
                    aria-labelledby="continuous-slider"/>
          </ClickAwayListener>
          }
        </div>
      </div>
    );
  }
}

export default withStyles(styles)(VolumeSlider);

我已经开始为此组件编写测试：

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

但是，运行此测试时出现错误：

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)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）