我的react项目中有一个类组件,它表示我的导航栏。我正在使用 window.scrollY
更新布尔状态的步骤 scrolled
.
当用户滚动时,类 nav-shadow
应添加到导航栏分区中 className
财产。
代码运行得很好,但是当我一起运行它们时,我的一个测试失败了。
这是我的密码:
appnav.tsx
class AppNav extends Component<any, {scrolled: boolean}> {
constructor(props: any) {
super(props);
this.state = {
scrolled: false
};
this.onScroll = this.onScroll.bind(this);
}
onScroll() {
const scrollY = window.scrollY;
this.setState({
scrolled: scrollY >= 75
});
}
componentDidMount() {
window.addEventListener("scroll", this.onScroll);
}
render() {
return (
<div aria-label="navigation" className={`${this.state.scrolled ? "nav-shadow" : ""}`}>
<p>Navbar Code...</p>
</div>
);
}
}
export default AppNav;
appnav.test.tsx
describe("AppNav", () => {
const { getByLabelText } = renderWithRouter(<AppNav/>);
const appNav = getByLabelText(/navigation/i);
// PASS
it("should be in the document", () => {
expect(appNav).toBeInTheDocument();
});
// PASS
it("should not have nav-shadow as class if window scroll is less than 75", () => {
Array.from(Array(74).keys()).forEach(scrollY => {
fireEvent.scroll(window, {
target: {
scrollY
}
});
expect(appNav.classList.contains("nav-shadow")).toBe(false);
});
});
// FAIL
// But PASS if ran individually
it("should have nav-shadow as class if window scroll is more than or equal to 75", () => {
Array.from(Array(100).keys()).map(i => i + 75).forEach(scrollY => {
fireEvent.scroll(window, {
target: {
scrollY
}
});
expect(appNav.classList.contains("nav-shadow")).toBe(true);
});
});
});
通过测试
应用导航
应该在文档中
如果窗口滚动小于75,则不应将导航阴影作为类
失败的测试
如果窗口滚动大于或等于75,则应将导航阴影作为类
调试代码时,我发现 nav-shadow
当我运行整个测试套件时,没有添加类。但是,当单独运行单个测试时,将添加调用。
我正在使用react测试库和jest的jsdom。
暂无答案!
目前还没有任何答案,快来回答吧!