如何模拟窗口。通过反应测试图形变化。

Question

我正在从酶迁移到 React-Testing-library 。我有一个称为＆lt; scrolltotop/＆gt; 的组件，该组件只需检查 window.location.location.location 以来自上次组件更新以来已更改并滚动到顶部。

scrolltopop.jsx

import React from "react";
import { withRouter } from "react-router-dom";

export class UnwrappedScrollToTop extends React.Component {
  componentDidUpdate(prevProps) {
    if (
      this.props.location !== prevProps.location &&
      !this.props.location.hash
    ) {
      window.scrollTo({ top: 0, behavior: "smooth" });
    }
  }

  render() {
    return this.props.children;
  }
}

export default withRouter(UnwrappedScrollToTop);

我使用的旧酶测试 wrapper.setprops 以传递新位置，然后测试是否是否 window> window.scrollto 被调用：

scrolltop.test.js ，

...
it("calls window.scrollTo (location changes, no hash)", () => {
    const wrapper = mount(
      <UnwrappedScrollToTop children="" location={{ pathname: "dashboard" }} />
    );


    // pass different location prop to trigger componentDidUpdate
    wrapper.setProps({ location: { pathname: "library" } });

    // check to see if scrollToMock was called in componentDidUpdate
    expect(ScrollToMock).toHaveBeenCalledWith({
      top: 0,
      behavior: "smooth"
    });
  });
...

但我不知道如何将其转换为 react-testing-library ，因为我无法调用 setProps 传递其他位置。我将如何测试此组件？

Answer 1

最简单的方法是使用 rerender 由 Render 返回的功能。

const {rerender} = render(<UnwrappedScrollToTop children="" location={{ pathname: "dashboard" }} />)

rerender(<UnwrappedScrollToTop children="" location={{ pathname: "library" }} />)

expect(ScrollToMock).toHaveBeenCalledWith({
    top: 0,
    behavior: "smooth"
});

链接到文档： https://testesting-library.com/docs /React-Testing-library/api/＃rerender