用酶测试“react.createref”API

我想测试下一个类,它使用 React.createRef 应用程序编程接口。

不过,快速搜索并没有发现任何这样做的例子。有人成功了吗?我该怎么嘲笑裁判呢?

理想情况下我想用 shallow .

class Main extends React.Component<Props, State> {

  constructor(props) {
    super(props);
    this.state = {
      contentY: 0,
    };

    this.domRef = React.createRef();
  }

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
    handleScroll();
  }

  componentWillUnmount() {
   window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll = () => {
    const el = this.domRef.current;
    const contentY = el.offsetTop;
    this.setState({ contentY });
  };

  render() {
    return (
      <Wrapper innerRef={this.domRef}>
        <MainRender contentY={this.state.contentY} {...this.props} />
      </Wrapper>
    );
  }
}

更新

所以我可以使用回调引用测试这个,如下所示

 setRef = (ref) => {
   this.domRef = ref;
 }

 handleScroll = () => {
   const el = this.domRef;
   if (el) {
     const contentY = el.offsetTop;
     this.setState({ contentY });
   }
 };

 render() {
   return (
     <Wrapper ref={this.setRef}>
       <MainRender contentY={this.state.contentY} {...this.props} />
     </Wrapper>
   );
 }
}

然后测试

it("adds an event listener and sets currentY to offsetTop", () => {
    window.addEventListener = jest.fn();
    const component = shallow(<ScrollLis />)
    const mockRef = { offsetTop: 100 };
    component.instance().setRef(mockRef);
    component.instance().componentDidMount();
    expect(window.addEventListener).toBeCalled();
    component.update();
    const mainRender = component.find(MainRender);
    expect(mainRender.props().contentY).toBe(mockRef.offsetTop);
  });