Provide a feature to mock native components in React Native

[ColCh]

I want to request a feature. Using React Native v0.33, jest latest v15

What is the current behavior?
Non-testable code, which uses custom native component

What is the expected behavior?
Provide some way to define mock for native component.

---

It's just about requireNativeComponent. Can we mock it or something? I wanted to make a snapshot test with native component.

For now, It just pops in console:

  console.error node_modules/react-native/Libraries/JavaScriptAppEngine/Initialization/ExceptionsManager.js:78
    Warning: Native component for "RCTPieChart" does not exist

(RCTPieChart is custom component)

[ColCh]

Ok. It seems that requireNativeComponent is defined as get-only property.

This is it's property descriptor:

{ get: [Function: requireNativeComponent],
  set: undefined,
  enumerable: true,
  configurable: true }

So, if you want to mock this function, do Object.defineProperty:

class mockRCTPieChart extends React.Component {
  render() {
    return <View />;
  }
}

///....

  describe('iOS', () => {
    beforeEach(() => {
      jest.resetModules();

      const rn = require('react-native'); // eslint-disable-line global-require
      rn.Platform.OS = 'ios';
      Object.defineProperty(rn, 'requireNativeComponent', {
        get: () => jest.fn().mockReturnValue(mockRCTPieChart),
      });

      PieChart = require.requireActual('../pie-chart').default;
    });

    runTests();
  });

Calling jest.resetModules(); will reset requireNativeComponent back to normal.
Inside of runTests(); I have it and expect(tree).toMatchSnapshot();, as regular components.

For that code, this snapshot is generated:

exports[`PieChart iOS should render pie chart 1`] = `<View />`;

Not very helpful :)

I'm closing issue since it's not related to Jest actually

[ColCh]

No, I will reopen it, since it generated helpful snapshots for some native components.

I just wanted to have something like this, but for my custom component...

<View
  accessibilityComponentType={undefined}
  accessibilityLabel={undefined}
  accessibilityTraits={undefined}
  accessible={true}
  hitSlop={undefined}
  onLayout={undefined}
  onResponderGrant={[Function bound touchableHandleResponderGrant]}
  onResponderMove={[Function bound touchableHandleResponderMove]}
  onResponderRelease={[Function bound touchableHandleResponderRelease]}
  onResponderTerminate={[Function bound touchableHandleResponderTerminate]}
  onResponderTerminationRequest={[Function bound touchableHandleResponderTerminationRequest]}
  onStartShouldSetResponder={[Function bound touchableHandleStartShouldSetResponder]}
  style={
    Object {
      "backgroundColor": "rgb(255, 255, 255)",
      "borderRadius": 2,
      "elevation": 2,
      "opacity": 1,
      "padding": 3,
      "shadowColor": "rgb(0, 0, 0)",
      "shadowOffset": Object {
        "height": 1
      },
      "shadowOpacity": 0.6,
      "shadowRadius": 0.5
    }
  }
  testID={undefined}>

[ColCh]

Hotfix

(Or "Resolve"?)

Just use React Element when you are mocking your native Component:

Same code as abode, but only difference:

const mockRCTPieChart = (props) => (
  React.createElement(
    'RCTPieChart',
    props,
    props.children,
  )
);

Provides this snapshot:

exports[`PieChart Android should render pie chart 1`] = `
<RCTPieChart
  chartRotation={-0.2617993877991494}
  innerCircleRadius={0.55}
  onSelect={[Function onSelectHandler]}
  segments={
.................................

👍 👍 👍

P.S. That was very unclear. Thanks https://github.com/facebook/jest/blob/master/packages/jest-react-native/src/index.js and https://github.com/facebook/jest/blob/master/packages/jest-react-native/src/setup.js

[cpojer]

It seems like you figured out how to provide your own mock. If you can think of a generic solution to this, please feel free to send a PR. I'm gonna close this issue for now however as I'm unclear what kind of action we could take.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.