如何使用 react-testing-library 模拟 window.location 变化
How to simulate window.location change with react-testing-library
我正在从 enzyme
迁移到 react-testing-library
。我有一个名为 <ScrollToTop/>
的组件,它只检查自上次组件更新后 window.location
是否发生了变化,如果发生变化则滚动到顶部。
ScrollToTop.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
通过一个新的location
然后测试是否调用window.scrollTo
:
ScrollToTop.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
来传递不同的位置。我将如何测试此组件?
最简单的方法是使用 render
返回的 rerender
函数。
const {rerender} = render(<UnwrappedScrollToTop children="" location={{ pathname: "dashboard" }} />)
rerender(<UnwrappedScrollToTop children="" location={{ pathname: "library" }} />)
expect(ScrollToMock).toHaveBeenCalledWith({
top: 0,
behavior: "smooth"
});
Link 到文档:https://testing-library.com/docs/react-testing-library/api/#rerender
我正在从 enzyme
迁移到 react-testing-library
。我有一个名为 <ScrollToTop/>
的组件,它只检查自上次组件更新后 window.location
是否发生了变化,如果发生变化则滚动到顶部。
ScrollToTop.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
通过一个新的location
然后测试是否调用window.scrollTo
:
ScrollToTop.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
来传递不同的位置。我将如何测试此组件?
最简单的方法是使用 render
返回的 rerender
函数。
const {rerender} = render(<UnwrappedScrollToTop children="" location={{ pathname: "dashboard" }} />)
rerender(<UnwrappedScrollToTop children="" location={{ pathname: "library" }} />)
expect(ScrollToMock).toHaveBeenCalledWith({
top: 0,
behavior: "smooth"
});
Link 到文档:https://testing-library.com/docs/react-testing-library/api/#rerender