Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to mock this library with jest? (Fails when used normally)

See original GitHub issue

Environment

Relevant versions:

"react": "17.0.2",
"react-native": "0.66.0",
"react-native-pager-view": "^5.4.9",

Description

Calling the setPage method on a viewPager ref causes jest to throw this error:

TypeError: Cannot read properties of undefined (reading 'Commands')

      87 |     if (viewPager.current) {
    > 88 |       viewPager.current.setPage(page);
         |                         ^
      89 |     }
      90 |

Reproducible Demo

Create an integration test with any component using ViewPager and call setPage on it’s ref. This error will throw.

Issue Analytics

State:
Created 2 years ago
Reactions:7
Comments:6 (1 by maintainers)

Top GitHub Comments

11reactions

madflanderzcommented, Jan 18, 2022

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>
      );
    }
  };
});

4reactions

troZeecommented, Dec 2, 2021

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>
      );
    }
  };
});