Open princefishthrower opened 2 years ago
Anybody? This is like the last thing I need to mock / stub to get my integration tests to start fully working...
jest.mock('react-native-pager-view', () => {
const React = require('react');
const View = require('react-native').View;
return class ViewPager extends React.Component {
render() {
const {
children,
initialPage,
onPageScroll,
onPageScrollStateChanged,
onPageSelected,
style,
scrollEnabled,
accessibilityLabel,
} = this.props;
console.log({
children,
initialPage,
onPageScroll,
onPageScrollStateChanged,
onPageSelected,
style,
scrollEnabled,
accessibilityLabel,
});
return (
<View
testID={this.props.testID}
initialPage={initialPage}
onPageScroll={onPageScroll}
onPageScrollStateChanged={onPageScrollStateChanged}
onPageSelected={onPageSelected}
style={style}
scrollEnabled={scrollEnabled}
accessibilityLabel={accessibilityLabel}
>
{children}
</View>
);
}
};
});
I extended the example with the public class methods and now it is working:
jest.mock("react-native-pager-view", () => {
const React = require("react");
const View = require("react-native").View;
return class ViewPager extends React.Component {
// *********************
// THIS WAS MISSING
setPage() {}
setPageWithoutAnimation() {}
setScrollEnabled() {}
// *********************
render() {
const {
children,
initialPage,
onPageScroll,
onPageScrollStateChanged,
onPageSelected,
style,
scrollEnabled,
accessibilityLabel,
} = this.props;
console.log({
children,
initialPage,
onPageScroll,
onPageScrollStateChanged,
onPageSelected,
style,
scrollEnabled,
accessibilityLabel,
});
return (
<View
testID={this.props.testID}
initialPage={initialPage}
onPageScroll={onPageScroll}
onPageScrollStateChanged={onPageScrollStateChanged}
onPageSelected={onPageSelected}
style={style}
scrollEnabled={scrollEnabled}
accessibilityLabel={accessibilityLabel}>
{children}
</View>
);
}
};
});
You can complement setPage callback mock and allow page view switching with:
setPage(selectedPage) { this.props.onPageSelected({ nativeEvent: { position: selectedPage } }); }
It allows rendering of content when a tab is pressed
I had a use-case where I wanted to test screen change using setPage
. Made some changes to get it working for me:
jest.mock('react-native-pager-view', () => {
const React = require('react');
const PropTypes = require('prop-types');
const View = require('react-native').View;
class ViewPager extends React.Component {
constructor(props) {
super();
this.state = {
page: props.initialPage,
};
}
setPage(selectedPage) {
this.setState({ page: selectedPage });
}
setPageWithoutAnimation() {}
setScrollEnabled() {}
render() {
const {
children,
initialPage,
onPageScroll,
onPageScrollStateChanged,
onPageSelected,
style,
scrollEnabled,
accessibilityLabel,
} = this.props;
return (
<View
testID={this.props.testID}
initialPage={initialPage}
onPageScroll={onPageScroll}
onPageScrollStateChanged={onPageScrollStateChanged}
onPageSelected={onPageSelected}
style={style}
scrollEnabled={scrollEnabled}
accessibilityLabel={accessibilityLabel}
>
{children[this.state.page]}
</View>
);
}
}
ViewPager.propTypes = {
children: PropTypes.element,
initialPage: PropTypes.number,
onPageScroll: PropTypes.func,
onPageScrollStateChanged: PropTypes.func,
onPageSelected: PropTypes.func,
style: PropTypes.object,
scrollEnabled: PropTypes.bool,
accessibilityLabel: PropTypes.string,
testID: PropTypes.string,
};
return ViewPager;
});
Thank you very much, @shubhnik . I needed to change setPage
to
setPage(selectedPage: number) {
this.setState({ page: selectedPage });
this.props.onPageSelected({ nativeEvent: { position: selectedPage } } as Partial<PagerViewOnPageSelectedEvent>);
}
to make it working :)
Thanks @shubhnik and @helferleinsoftware.
In my case it was useful to define setPageWithoutAnimation
as well:
setPageWithoutAnimation(selectedPage) {
this.setState({ page: selectedPage });
this.props.onPageSelected({ nativeEvent: { position: selectedPage } });
}
I also got this warning:
Warning: Failed prop type: Invalid prop `children` of type `array` supplied to `ViewPager`, expected a single ReactElement.
which can be avoided by adjusting the prop types for children
:
-- children: PropTypes.element,
++ children: PropTypes.node,
Environment
Relevant versions:
Description
Calling the
setPage
method on a viewPagerref
causes jest to throw this error:Reproducible Demo
ViewPager
and callsetPage
on it's ref. This error will throw.